Événement central
Généralement, ces événements sont utilisés conjointement avec la méthode document.hasFocus() et la propriété document.activeElement. Incluent principalement :
flou : l'élément perd sa focalisation et ne bouillonne pas
;
DOMFocusIn : Identique au focus d'événement HTML, abandonné dans DOM3, utilisez focusin
;
DOMFocusOut : Identique au flou d'événement HTML, abandonné dans DOM3, utilisez focusout
;
focus : l'élément obtient le focus et ne revient pas ;
focusin : obtient le focus, équivalent au focus d'événement HTML, mais fera des bulles
;
focusout : perte de focus, équivalent au flou d'événement HTML
Tel que :
window.onfocus = function () {
console.log('focus'); //focus
console.log(document.hasFocus()); //True
}
window.onblur = function () {
console.log('blur'); //blur
console.log(document.hasFocus()); //False
}
Lorsque le focus passe d'un élément à un autre sur la page, l'événement suivant sera déclenché :
focusout -> focusin -> flou -> DOMFocusOut -> focus -> DOMFocusIn
Événements de souris
9 événements de souris sont définis dans les événements DOM niveau 3 :
click dblclick mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件； mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件； mousemove：不能通过键盘触发这个事件； mouseenter：不冒泡，且光标移动到后代元素上不会触发； mouseleave：不冒泡，且光标移动到后代元素上不会触发； mouseover：光标移动到后代元素上会触发； mouseout：光标移动到后代元素上会触发；
Par exemple :
div.onmouseover = function() {
console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
console.log('mouseleave'); //在子元素上不会触发
}
Uniquement lorsque les événements mousedown et mouseup sont divisés successivement sur le même élément, l'événement click sera déclenché ; seulement lorsque l'événement click est déclenché deux fois, l'événement dblclick sera déclenché en séquence.
L'ordre est le suivant :
mousedown --> mouseup --> cliquez --> mouseup -->
Il y a un bug dans les versions antérieures à IE8. Dans l'événement double-clic, les deuxièmes événements mousedown et click seront ignorés
Événement de roue
La zone client coordonne la position des attributs clientX et clientYPar exemple :
window.onmousemove = function() {
clickX = event.clientX;
clickY = event.clientY;
var div = document.createElement("img");
div.src = "hhh.gif"
div.style.position = "absolute";
div.style.width = '100px';
div.style.left = clickX + "px";
div.style.top = clickY + "px";
document.body.appendChild(div);
};
window.onclick = function() {
clickX = event.pageX;
clickY = event.pageY;
var div = document.createElement("img");
div.src = "ppp.png"
div.style.position = "absolute";
div.style.width = '100px';
div.style.left = clickX + "px";
div.style.top = clickY + "px";
document.body.appendChild(div);
};
if (clickX === undefined) {
clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};
Grâce à cet attribut, vous pouvez obtenir les coordonnées relatives à l'écran.
Touches de modification
Les touches de modification incluent Shift, Ctrl, Alt et Meta (touche Windows sous Windows, touche Cmd sur Mac) ; les états des touches de modification correspondantes sont shiftKey, ctrlKey, altKey et metaKey. Ces attributs contiennent des valeurs booléennes, vraies si. la touche correspondante est enfoncée, false sinon. Tel que :
var array = [];
var timing = setTimeout(showArray, 100);
window.onclick = function() {
if (event.shiftKey) {
array.push("shift");
};
if (event.ctrlKey) {
array.push("ctrl");
};
if (event.altKey) {
array.push("alt");
};
if (event.metaKey) {
array.push("meta");
};
};
function showArray() {
var str = array.toString();
var newP = document.createElement("p");
newP.appendChild(document.createTextNode(str));
document.body.appendChild(newP);
timing = setTimeout(showArray, 1000);
}
Éléments associés
event.ratedTarget et event.target
L'attribut RelatedTarget fournit des informations sur les éléments associés. Cet attribut contient uniquement des valeurs pour les événements mouseover et mouseout ; pour les autres événements, la valeur est nulle ; les versions antérieures à IE8 ne prennent pas en charge l'attribut RelatedTarget. Lorsque l'événement mouseover est déclenché, les éléments pertinents sont enregistrés dans l'attribut fromElement d'IE. lorsque l'événement mouseout est déclenché, les éléments pertinents sont stockés dans l'attribut toElement d'IE.Par exemple :
var dot = document.getElementById("dot");
dot.onmouseout = function (){
console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);
};
function getRelatedTarget() {
if (event.ralatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
}
Boutons de la souris
attribut du boutonL'attribut event.button du DOM a trois valeurs : 0 pour le bouton principal de la souris, 1 pour le bouton central de la souris et 2 pour le bouton secondaire de la souris. Dans des paramètres normaux, le bouton principal de la souris est le bouton gauche de la souris ; le bouton secondaire de la souris est le bouton droit de la souris.
IE8 et les versions précédentes fournissent également l'attribut bouton, mais la valeur de cet attribut est très différente de l'attribut bouton DOM :
0 : Aucun bouton de la souris enfoncé ;
1 : Bouton principal de la souris ;
2 : Bouton secondaire de la souris ;
3 : Appuyez simultanément sur les boutons principal et secondaire de la souris ;
4 : Bouton central de la souris ;
5 : Appuyez simultanément sur le bouton principal de la souris et sur le bouton central de la souris
;
6 : Appuyez simultanément sur le deuxième bouton de la souris et sur le bouton central de la souris
;
7 : Appuyez simultanément sur trois boutons de la souris
Version compatible :
function getButton() {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
document.oncontextmenu = function(event) {
// if (window.event) {
// event = window.event;
// }
// try {
// var the = event.srcElement;
// if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
// return false;
// }
// return true;
// } catch (e) {
// return false;
// }
return false;
}
attribut de détail
Pour les événements de souris, le détail contient une valeur indiquant le nombre de clics effectués à une position donnée (un mousedown et un mouseup). Le nombre commence à compter à partir de 1. Si la position s'est déplacée entre mousedown et mouseup , le détail sera réinitialisé. à 0, et si l'intervalle de clic est trop long, il sera également réinitialisé à 0.
Événement de la molette de la sourisévénement mousewheel et attribut wheelDelta
Lorsque l'utilisateur fait défiler la page verticalement, la molette de la souris sera déclenchée. L'attribut wheelDelta dans l'objet événement signifie que lorsque l'utilisateur fait rouler la roue vers l'avant, le wheelDelta est un multiple de 120 lorsque l'utilisateur fait rouler la roue vers l'arrière, le wheelDelta est un multiple de -120. Tel que :
另外，在Opera 9.5之前的版本中，wheelDelta值的正负号是颠倒的。
此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。
通用版：
function getWheelDelta() {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
};
}
触摸设备
iOS和Android设备中：
不支持dblclick；
轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
mousemove事件也会触发mouseover和mouseout事件；
两个手指操作会触发mousewheel和scroll；
无障碍性问题
使用click事件执行代码；
不要使用onmouseover向用户显示新的信息；
不要使用dblclick执行重要的操作；
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
