Detaillierte Erläuterung der Verwendung von JavaScript-Fokusereignissen, Mausereignissen und Scrollradereignissen_Javascript-Fähigkeiten

Fokusveranstaltung

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: Identisch mit HTML-Ereignisunschärfe, in DOM3 aufgegeben, verwenden Sie
Fokus: Das Element erhält den Fokus und sprudelt nicht zurück
focusin: Fokus erhalten, entspricht dem HTML-Ereignisfokus, wird jedoch sprudeln; 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:

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

Focusout --> Focusin --> DOMFocusOut -->

Maus-Events

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

Zum Beispiel:

click
dblclick
mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；
mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；
mousemove：不能通过键盘触发这个事件；
mouseenter：不冒泡，且光标移动到后代元素上不会触发；
mouseleave：不冒泡，且光标移动到后代元素上不会触发；
mouseover：光标移动到后代元素上会触发；
mouseout：光标移动到后代元素上会触发；

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.

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

Die Reihenfolge ist wie folgt:

Mousedown --> Mousedown --> Mousedown -->

In Versionen vor IE8 gibt es einen Fehler. Beim Doppelklick-Ereignis werden die zweiten Mousedown- und Klick-Ereignisse übersprungen.

Radereignis

Clientbereichskoordinatenposition clientX- und clientY-Attribute

Zum Beispiel:

Seitenkoordinatenpositionen pageX und pageY;

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

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:

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

Bildschirmkoordinatenpositionen screenX und screenY;

Über dieses Attribut können Sie die Koordinaten relativ zum Bildschirm abrufen.

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

Ä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:

Verwandte Elemente

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

event.latedTarget und 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.

Zum Beispiel:

Zum Beispiel:

var dot = document.getElementById("dot");
dot.onmouseout = function (){
  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);
};

Maustasten

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

Schaltflächenattribut

Das event.button-Attribut von DOM hat drei Werte: 0 für die primäre Maustaste, 1 für die mittlere Maustaste und 2 für die sekundäre Maustaste. In normalen Einstellungen ist die primäre Maustaste die linke Maustaste; die sekundäre Maustaste ist die rechte Maustaste. IE8 und frühere Versionen bieten ebenfalls das Schaltflächenattribut, aber der Wert dieses Attributs unterscheidet sich stark vom DOM-Schaltflächenattribut:

0: Keine Maustaste gedrückt;

1: Hauptmaustaste;

2: Sekundäre Maustaste;

3: Drücken Sie gleichzeitig die primäre und sekundäre Maustaste 4: Mittlere Maustaste;

5: Drücken Sie gleichzeitig die Hauptmaustaste und die mittlere Maustaste 6: Drücken Sie gleichzeitig die zweite Maustaste und die mittlere Maustaste 7: Drücken Sie gleichzeitig drei Maustasten

Kompatible Version:




Wenn Sie außerdem die rechte Maustaste blockieren möchten, sollten Sie Folgendes verwenden:

Dieses Ereignis wird durch HTML5 definiert und wird später besprochen

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

Weitere Veranstaltungsinformationen

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

Detailattribut

Bei Mausereignissen enthält das Detail einen Wert, der angibt, wie viele Klicks an einer bestimmten Position stattgefunden haben (ein Mousedown und ein Mouseup. Die Zahl beginnt bei 1 zu zählen. Wenn sich die Position zwischen Mousedown und Mouseup verschoben hat, werden die Details zurückgesetzt auf 0, und wenn das Klickintervall zu lang ist, wird es auch auf 0 zurückgesetzt.

Mausrad-Event

Mausrad-Ereignis und WheelDelta-Attribut

Wenn der Benutzer die Seite vertikal scrollt, wird das WheelDelta-Attribut im Ereignisobjekt ausgelöst, dass, wenn der Benutzer das Rad vorwärts dreht, das WheelDelta ein Vielfaches von 120 ist; das WheelDelta beträgt -120. Zum Beispiel:

另外，在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执行重要的操作；