Detaillierte Erläuterung von Fokus-, Maus- und Radereignissen in JavaScript-Ereignistypen_Javascript-Kenntnisse

Dieser Artikel organisiert die wichtigsten Punkte von „Fokus-, Maus- und Radereignissen“ unter „Ereignistyp“ in JavaScript-Ereignissen und teilt sie Ihnen als Referenz mit. Der spezifische Inhalt ist wie folgt.

1. Fokusveranstaltungen

Im Allgemeinen werden diese Ereignisse in Verbindung mit der Methode document.hasFocus() und der Eigenschaft document.activeElement verwendet. Dazu gehören hauptsächlich:

• Unschärfe: Das Element verliert den Fokus und bildet keine Blasen
• DOMFocusIn: Wie HTML-Ereignisfokus, in DOM3 aufgegeben, verwenden Sie focusin;
DOMFocusOut: Gleich wie HTML-Ereignisunschärfe, in DOM3 aufgegeben, verwenden Sie Focusout;
• Fokus: Das Element wird fokussiert und sprudelt nicht zurück
• focusin: Fokus erhalten, was dem HTML-Ereignisfokus entspricht, aber sprudelt;
Focusout: Fokus verlieren, entspricht HTML-Ereignisunschärfe
Zum Beispiel:
• 
  Wenn der Fokus von einem Element zu einem anderen auf der Seite wechselt, wird das folgende Ereignis ausgelöst:

Fokussierung --> DOMFocusOut --> Fokussierung -->

2. Mausereignisse

window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

9 Mausereignisse sind in DOM-Level-3-Ereignissen definiert:

klicken

dblclick

• Mousedown: Wird ausgelöst, wenn der Benutzer eine beliebige Maustaste drückt. Dieses Ereignis kann nicht über die Tastatur ausgelöst werden
Mouseup: Wird ausgelöst, wenn der Benutzer die Maustaste loslässt. Dieses Ereignis kann nicht über die Tastatur ausgelöst werden
• mousemove: Dieses Ereignis kann nicht über die Tastatur ausgelöst werden
• mouseenter: sprudelt nicht und wird nicht ausgelöst, wenn sich der Cursor zu untergeordneten Elementen bewegt
• mouseleave: sprudelt nicht und wird nicht ausgelöst, wenn sich der Cursor zu untergeordneten Elementen bewegt
• Mouseover: Wird ausgelöst, wenn sich der Cursor zu einem untergeordneten Element bewegt;
• Mouseout: Wird ausgelöst, wenn sich der Cursor zu untergeordneten Elementen bewegt
• Zum Beispiel:
• Nur ​​wenn die Mousedown- und Mouseup-Ereignisse nacheinander auf dasselbe Element aufgeteilt werden, wird das Click-Ereignis nur dann ausgelöst, wenn das Click-Ereignis zweimal ausgelöst wird. Das Dblclick-Ereignis wird nacheinander ausgelöst.
Die Reihenfolge ist wie folgt:
• Mausklick --> Mausklick --> In Versionen vor IE8 gibt es einen Fehler. Beim Doppelklick-Ereignis werden die zweiten Mousedown- und Klick-Ereignisse übersprungen.
  3. Roller-Event

1. Clientbereichskoordinatenposition clientX- und clientY-Attribute

Zum Beispiel:

div.onmouseover = function() {
  console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
  console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
  console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
  console.log('mouseleave'); //在子元素上不会触发
}

2. Seitenkoordinatenpositionen SeiteX und SeiteY;

Diese Seitenkoordinatenposition wird in IE8 und früheren Versionen nicht unterstützt. Sie kann mithilfe der Attribute scrollLeft und scrollTop in document.body im gemischten Modus und document.documentElement im Standardmodus berechnet werden:

3. Bildschirmkoordinatenpositionen screenX und screenY;

Über dieses Attribut können Sie die Koordinaten relativ zum Bildschirm abrufen. 4. Änderungsschlüssel

Modifikationstasten umfassen Shift, Strg, Alt und Meta (Windows-Taste unter Windows, Cmd-Taste unter Mac); die entsprechenden Modifikatortastenzustände sind ShiftKey, AltKey und MetaKey die entsprechende Taste wird gedrückt, andernfalls false. Zum Beispiel:

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

5. Verwandte Elemente

event.latedTarget

und

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

event.target

Das relatedTarget-Attribut stellt Informationen über verwandte Elemente bereit. Dieses Attribut enthält nur Werte für Mouseover- und Mouseout-Ereignisse. Bei anderen Ereignissen ist der Wert null. Versionen vor IE8 unterstützen das relatedTarget-Attribut nicht. Wenn das Mouseover-Ereignis ausgelöst wird, werden die relevanten Elemente im IE-Attribut gespeichert ; Wenn das Mouseout-Ereignis ausgelöst wird, werden die relevanten Elemente im toElement-Attribut des IE gespeichert.

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

Zum Beispiel:

Zum Beispiel:

四、鼠标按钮

1、button属性

DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：

• 0：没有按下鼠标按钮；
  
• 1：主鼠标按钮；
  
• 2：次鼠标按钮；
  
• 3：同时按下主鼠标按钮和次鼠标按钮；
  
• 4：中间鼠标按钮；
  
• 5：同时按下主鼠标按钮和中间鼠标按钮；
  
• 6：同时按下次鼠标按钮和中间鼠标按钮；
  
• 7：同时按下三个鼠标按钮
  

兼容版：

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

这个事件是HTML5定义的，以后再讨论

2、更多的事件信息

detail属性

对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.

3、鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是120的倍数；当向后滚动滚轮时，wheelDelta是-120的倍数。如：

var clientHeight = document.documentElement.clientHeight;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].style.height = clientHeight + "px";
};

window.onmousewheel = function () {
  if (event.wheelDelta <= -120) {
    window.scrollBy(0,clientHeight);
  }else if(event.wheelDelta >= 120){
    window.scrollBy(0,-clientHeight);
  };
}

另外，在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;
  };
}

4、触摸设备

iOS和Android设备中：

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

5、无障碍性问题

• 使用click事件执行代码；
• 不要使用onmouseover向用户显示新的信息；
• 不要使用dblclick执行重要的操作；

以上就是本文的全部内容，希望对大家的学习有所帮助。