Kapselung des Hinzufügens und Löschens nativer js-events_javascript-Fähigkeiten

Um Ereignisse im IE-Browser hinzuzufügen oder zu löschen, verwenden Sie attachmentEvent und detachEvent. In anderen Standardbrowsern werden addEventListener und removeEventListener verwendet. Im Folgenden wird das Hinzufügen und Löschen von Ereignissen zusammengefasst. Schauen wir uns einfach den Code an!

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

Weitere Ergänzungen zur Bedeutung des dritten Parameters von addEventListener

Der dritte Parameter von addEventListener

Die Funktion zum Hinzufügen von Triggerereignissen im W3C DOM heißt AddEventListener, aber ich weiß nie, wofür der dritte Parameter dieser Funktion verwendet wird, ich habe ihn immer beiläufig festgelegt und nie gefunden Wie unterschiedlich der Unterschied ist, ich habe die Erklärung endlich gesehen, als ich vor zwei Tagen ppk auf Javascript gelesen habe. Was das DOM-Standarddokument betrifft, das vor langer Zeit existierte, habe ich eigentlich nie nach Informationen zu diesem Parameter gesucht alle.

Dieser Parameter heißt useCapture und ist ein boolescher Wert. Wenn true oder false gesendet wird, verwendet der Browser die Capture-Methode Es wird normalerweise empfohlen, dass das Zielelement (Zielelement) ein Vorfahrenelement (Vorfahrenelement) hat und dass es meiner Meinung nach auch die gleiche Ereignisfunktion hat klarer, wenn man sich das Bild anschaut.

Beispiel eines zweischichtigen Div-Blocks

Wie in diesem Bild gezeigt, verfügt mein Beispiel über zwei Ebenen von div-Elementen, und beide sind mit Klickereignissen ausgestattet. Wenn ich auf das innere blaue Element klicke, wird im Allgemeinen nicht nur das blaue Element ausgelöst löst gleichzeitig auch das Klickereignis des roten Elements aus, und der Parameter useCapture steuert die Reihenfolge der beiden Klickereignisse zu diesem Zeitpunkt. Wenn es falsch ist, wird Sprudeln verwendet. Es handelt sich um einen Inside-Out-Prozess, sodass zuerst das Klickereignis des blauen Elements ausgeführt wird und dann das Klickereignis des roten Elements Im Gegensatz zum Sprudeln wird es von Outside-In ausgeführt, das Klickereignis des roten Elements wird zuerst ausgeführt und dann wird das Klickereignis des blauen Elements ausgeführt. Im Anhang finden Sie zwei Beispiele: Capture und Bubbling. Der einzige Unterschied zwischen den beiden Dateien besteht darin, dass die Reihenfolge der Ereignisse unterschiedlich ist.

Was passiert, wenn Elemente in verschiedenen Ebenen unterschiedliche useCaptures verwenden? Das heißt, es wird zunächst nach dem Ereignissatz gesucht, der vom äußersten Element bis zum Zielelement erfasst werden soll. Nachdem das Zielelement erreicht und das Ereignis des Zielelements ausgeführt wurde, wird dann nach dem Ereignissatz gesucht, der entlang des Originals nach außen sprudelt Weg.