Helfen Sie dabei, das Ereignismodell in JavaScript schnell zu verstehen

In diesem Artikel wird hauptsächlich das Ereignismodell in Javascript vorgestellt, das ein Ereignismodell auf DOM0-Ebene und ein Ereignismodell auf DOM2-Ebene (Ereigniserfassung und Ereignissprudeln sowie Registrierungsereignisse und Deaktivierungsereignisse auf DOM2-Ebene) umfasst Wenn Sie mit JavaScript vertraut sind, können Sie auf diesen Artikel verweisen

Es gibt zwei Ereignismodelle in JavaScript: DOM0 und DOM2. Was diese beiden Zeitmodelle angeht, habe ich mich nie ganz im Klaren darüber gemacht. Jetzt verstehe ich endlich etwas mehr, indem ich online nach Informationen suche.

1. DOM-Level-0-Ereignismodell

Das DOM-Level-0-Ereignismodell ist ein frühes Ereignismodell und wird von allen Browsern unterstützt Auch die Umsetzung ist relativ einfach. Der Code lautet wie folgt:

<p id = &#39;click&#39;>click me</p>
<script>
 document.getElementById(&#39;click&#39;).onclick = function(event){
  alert(event.target);
 }
</script>

Dieses Ereignismodell dient dazu, den Ereignisnamen direkt im Dom-Objekt zu registrieren. In diesem Ereignis wird ein Onclick-Ereignis registriert Funktion Gibt intern das angeklickte Ziel aus. Das Entfernen des Ereignisses ist noch einfacher. Kopieren Sie einfach null wie folgt in die Ereignisfunktion:

document.getElementById('click'_).onclick = null;
Daraus können wir erkennen, dass in dom0 ein Dom-Objekt nur eine Funktion desselben registrieren kann Typ, denn Wenn Sie mehrere Funktionen desselben Typs registrieren, kommt es zu einem Überschreiben und die zuvor registrierten Funktionen werden ungültig.

var click = document.getElementById('click');
click.onclick = function(){
 alert('you click the first function');
};
click.onclick = function(){
 alert('you click the second function')
}

In diesem Code haben wir zwei Onclick-Funktionen für das DOM-Objekt registriert, aber als Ergebnis wurde nur die zweite registrierte Funktion ausgeführt und die zuvor registrierte Funktion wurde überschrieben.

2. Ereignismodell auf DOM2-Ebene

1. Ereigniserfassung und Ereignissprudeln (Erfassung, Blase)

Erstens unterstützen IE8 und niedriger dieses Ereignismodell nicht. Der Mechanismus der Ereigniserfassung und des Ereignis-Bubblings ist wie folgt:

Wie in der Abbildung oben gezeigt, steht 123 für die Ereigniserfassung und 4567 für das Ereignis-Bubbling. Zuerst verwenden wir den folgenden Code:

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>

Angenommen, wir klicken auf p mit der inneren ID, dann besteht der Ereignisfluss zu diesem Zeitpunkt darin, zuerst die Erfassungsphase auszuführen: document-html-body- p( außen). Führen Sie dann die Bubbling-Phase aus: p(inner)-p(outer)-body-html-document.

　　2. Registrierungsereignisse und Deaktivierungsereignisse auf DOM2-Ebene

Verwenden Sie addEventListener und removeEventListener auf DOM2-Ebene, um Ereignisse zu registrieren und zu deaktivieren (IE8 und nicht). in früheren Versionen unterstützt). Der Vorteil dieser Funktion gegenüber der vorherigen Methode besteht darin, dass ein DOM-Objekt mehrere Ereignisse desselben Typs registrieren kann und kein Ereignisüberschreiben auftritt und jede Ereignisfunktion nacheinander ausgeführt wird.

　addEventListener('event name', 'event callback', 'capture/bubble'). Ein Beispiel ist wie folgt:

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click one&#39;);
 },false);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click two&#39;);
 },false);
</script>

Zuerst müssen wir wissen, dass der erste Parameter von addEventListenr der Ereignisname ist. Anders als bei DOM-Level 0 gibt es außerdem kein „on“. steht für Capture oder Bubbling, und true für Capture-Ereignisse, False für Bubbling-Ereignisse.

In diesem Code haben wir zwei Klickereignisfunktionen für inneres p registriert. Das Ergebnis ist, dass der Browser diese beiden Funktionen nacheinander ausführt.
Als Nächstes demonstrieren wir, wie der Mechanismus zur Ereignisstromgenerierung verwendet wird.

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;inner show&#39;);
 },true);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },true);
</script>

In diesem Code verwenden wir das Capture-Ereignis. Da Inner in Outer verschachtelt ist, wissen wir, dass bei Verwendung von Capture zuerst Outer das Ereignis erfassen sollte und dann Inner dieses Ereignis erfassen kann . Das Ergebnis ist dann, dass zuerst „outer“ und dann „inner“ ausgeführt wird.

Was passiert also, wenn ich den Ausführungszeitpunkt von der äußeren auf die sprudelnde Phase ändere?

alickouter.addEventListener('click',function(){
 alert('outer show'); 
},false);

In diesem Fall wird zuerst „Inner“ und dann „Outer“ ausgeführt. Wenn wir den Ausführungszeitpunkt beider Ereignisse auf die Blasenphase ändern, wird auf die gleiche Weise immer noch zuerst das innere und dann das äußere ausgeführt. Dann gibt es noch ein weiteres Problem: Wenn wir zwei Klickereignisse in Inner registrieren, befindet sich eines in der Erfassungsphase und das andere in der Bubbling-Phase, dh der dritte Parameter von addEventListenter wird auf false bzw. true gesetzt , dann ausführen Was ist die Reihenfolge von .

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;capture show&#39;);
 },true);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;bubble show&#39;);
 },false);
</script>

In diesem Fall ist das erste, was zu tun ist, die Capture-Show, gefolgt von der Bubble-Show. Dieses Ergebnis hängt jedoch mit der Reihenfolge der Registrierung zusammen. Der erste, der sich registriert, wird zuerst ausgeführt. Da wir uns das Diagramm der Ereigniserfassung und des Ereignis-Bubblings ansehen, stellen wir fest, dass es am Ende nur ein bestimmtes DOM-Objekt gibt.

Was passiert also, wenn wir Klickereignisse sowohl für den Außen- als auch den Innenbereich registrieren, ich aber nicht möchte, dass der Außenbereich ausgeführt wird? Zu diesem Zeitpunkt müssen wir die Funktion stopPropagation verwenden. Diese Funktion wird verwendet, um Blasenbildung zu verhindern. Dies bedeutet, dass das Ereignis nicht mehr sprudelt, sodass das DOM-Objekt, das denselben Ereignistyp registriert, nicht ausgeführt wird.

Wenn wir beispielsweise ein benutzerdefiniertes Dropdown-Feld erstellen, klicken wir auf eine andere Stelle im Browser und müssen die Optionen des Dropdown-Felds ausblenden. In diesem Fall müssen wir stopPropagation verwenden. Wie folgt:

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(event){
  alert(&#39;inner show&#39;);
  event.stopPropagation();
 },false);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },false);
</script>

　　正常的情况下，我们在不添加stopPropagation函数时，首先应该执行inner，然后执行outer，但是当我们在inner的事件函数中添加了stopPropagation函数之后，执行完inner的事件函数之后，就不会在执行outer的事件函数了，也可以理解为事件冒泡到inner之后就消失了，因此也就不会在执行接下来的事件函数了。

　　由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。

相关推荐：

JavaScript实现为事件句柄绑定监听函数实例详解

JavaScript文件的同步和异步加载的实现代码

JavaScript 完成注册页面表单校验的实例

Das obige ist der detaillierte Inhalt vonHelfen Sie dabei, das Ereignismodell in JavaScript schnell zu verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!