Explication détaillée de l'utilisation des événements de focus JavaScript, des événements de souris et des compétences de la molette de défilement events_javascript

É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 clientY

Par 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);
};

Positions des coordonnées de la page pageX et pageY

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);
};

Cette position des coordonnées de page n'est pas prise en charge dans IE8 et les versions antérieures. Elle peut être calculée en utilisant les attributs scrollLeft et scrollTop dans document.body en mode mixte et document.documentElement en mode standard :

if (clickX === undefined) {
  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};

Positions des coordonnées de l'écran screenX et screenY ;

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);
};

Par exemple :

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 bouton

L'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;
    }
  }
}

De plus, si vous souhaitez bloquer le bouton droit de la souris, vous devez utiliser :

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;
}

Cet événement est défini par HTML5 et sera discuté plus tard

Plus d'informations sur l'événement

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 &#63; -event.wheelDelta : event.wheelDelta);
  } else {
    return -event.detail * 40;
  };
}

触摸设备

iOS和Android设备中：

不支持dblclick；
轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
mousemove事件也会触发mouseover和mouseout事件；
两个手指操作会触发mousewheel和scroll；

无障碍性问题

使用click事件执行代码；

不要使用onmouseover向用户显示新的信息；
不要使用dblclick执行重要的操作；