Detaillierte Erläuterung von Beispielen für Ereignismodelle in JS

Ich war mir vorher relativ klar über das Veranstaltungsmodell und viele Konzepte waren in meinem Kopf klar abgebildet. Nach der Arbeit habe ich einerseits
Einschränkungen verwendet und andererseits habe ich mich daran gewöhnt, verschiedene Ereignisüberwachungsmethoden im Framework zu verwenden. Mit der Zeit begannen einige Konzepte von Ereignissen
Ich habe begonnen, C-Sprachzeiger, Maxwell-Gleichungen, Matrixtransformationen, die Methode der kleinsten Quadrate usw. zu vergessen. Wissen ist wie buntes Kopfsteinpflaster, das den Weg nach vorne ebnet, von einfach bis tiefgreifend, von tiefgreifend bis verständlich, und immer
dabei hilft, immer weiter zu kommen. Werfen wir einen Blick zurück auf das Veranstaltungsmodell.

1. Kurze Einführung der Ereignisse Zu den Ereignissen gehören:
Mausereignis
Tastaturereignis
Rahmenereignis bei Fehler bei Größenänderung onscroll usw.
Formularereignisereignis onblur onfocus usw.
Zwischenablageereignis oncopy oncut onpaste
Druckevent onafterprint onbeforeprint
Drag event ondrag ondragentter usw.
Medienereignis onplay onpause
Animationsereignisanimationend
Übergangsereignis
Andere Ereignisse usw.

Ereignisse werden in Objekte gekapselt, einschließlich

Zielereignisobjekt
Ereignisüberwachungsobjekt
Mausereignisobjekt
Tastaturereignisobjekt usw.
Sie enthalten ihre eigenen Eigenschaften und Methoden und erben auch vom Event-Objekt. Es hängt von Ihrem W3C ab.
Gemeinsame Methoden:
event.preventDefault()//Verhindern Sie das Standardverhalten von Elementen, wie z. B. Linksprünge und Formularübermittlungen;
eventPropagation()//Verhindern Sie das Sprudeln von Ereignissen

2. Drei Ereignismodelle
1. Ursprüngliches Ereignismodell (DOM-Level 0) Merkmale: Im ursprünglichen Ereignismodell sind Ereignisse vorhanden Es gibt kein Konzept der Ausbreitung nach dem Eintreten, keinen Ereignisfluss. Wenn ein Vorfall auftritt, behandeln Sie ihn sofort.
Die Listener-Funktion ist nur ein Attributwert des Elements, und der Listener ist an die Angabe des Attributwerts des Elements gebunden. Es gibt zwei Schreibmethoden:

HTML: 60eb1bec36959cc620b217a19800224b

js: document.getElementsById('btn').onclick = func

Vorteile: Alle Browser sind kompatibel

Nachteile:

Es gibt keine Trennung zwischen Logik und Anzeige
b. Die gleiche Ereignisüberwachungsfunktion kann nur an einen gebunden werden. und dann gebunden wird das vorherige überschreiben.
c. Event-Bubbling, Delegation und andere Mechanismen können nicht bestanden werden.

In der aktuellen modularen Entwicklung von Webprogrammen und komplexerer Logik ist diese Methode offensichtlich veraltet und wird daher in realen Projekten nicht empfohlen. Es ist in Ordnung, einige Demos im täglichen Leben zu schreiben, und die Geschwindigkeit ist relativ schnell.

2. IE-Ereignismodell

Funktionen: IE legt das Ereignisobjekt als Attribut des Fensters in der Verarbeitungsfunktion fest. Sobald die Funktionsausführung abgeschlossen ist, wird es auf Null gesetzt .
Das Ereignismodell des IE besteht nur aus zwei Schritten. Zuerst wird die Überwachungsfunktion des Elements ausgeführt, und dann wird das Ereignis entlang des übergeordneten Knotens zum Dokument weitergeleitet.
Methode zum Binden und Freigeben der Überwachungsfunktion:
attachmentEvent( „eventType“, „handler“), wobei evetType der Ereignistyp ist, z. B. onclick. Fügen Sie unbedingt
'on' hinzu.
Die Methode zum Deaktivieren des Ereignis-Listeners ist detachEvent("eventType", "handler" );
Nachteil: Sie kann nur vom IE selbst verwendet werden, was zu kalt ist.

3. DOM2-Ereignismodell

Das Ereignismodell ist in W3C Level 2 DOM-Ereignissen standardisiert, also dem DOM2-Ereignismodell. Moderne Browser (ohne IE9 und niedriger) folgen alle dieser Spezifikation. Funktionen:
Im vom W3C entwickelten Ereignismodell umfasst das Eintreten eines Ereignisses drei Prozesse:
a. Das Ereignis wird vom Dokument bis zum Zielelement weitergegeben. Während dieses Vorgangs wird wiederum überprüft, ob die übergebenen Knotenpunkte eine Abhörfunktion für das Ereignis registriert haben, und wenn ja, wird diese ausgeführt.
b. Ereignisverarbeitungsphase. Wenn das Ereignis das Zielelement erreicht, wird die Ereignisverarbeitungsfunktion des Zielelements ausgeführt
c. Das Ereignis steigt vom Zielelement bis zum Dokument. Außerdem prüft es, ob die durchlaufenden Knoten
die Überwachungsfunktion für das Ereignis registriert haben, und führt sie gegebenenfalls aus.


Hinweis:
Alle Ereignistypen durchlaufen die Ereigniserfassungsphase, aber nur einige Ereignisse durchlaufen die Ereignis-Bubbling-Phase. Beispielsweise wird das

Einreichungsereignis nicht geblubbert .

Methode zum Binden und Entsperren der Abhörfunktion: addEventListener("eventType", "handler", "true|false"); Hinweis:
nicht hinzufügen das Präfix „on“, anders als im IE.

Der zweite Parameter ist die Verarbeitungsfunktion.

Der dritte Parameter wird verwendet, um anzugeben, ob in die Erfassungsphase „true“ während der Erfassungsphase „false“ nur in der Bubbling-Phase eingegeben werden soll
Das Entfernen des Listeners ist ebenfalls ähnlich: removeEventListner("eventType", "handler","true!false");


Kompatibel mit IE und modernen Browsern, Ereignisregistrierung, Listening-Schreibmethode

现有的框架和类库都会对适应各种浏览器做兼容性的封装，JQuery底层即使用了上面的兼容性写法。

 

三、事件的捕获-冒泡机制
DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和
冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。

以如下HTML结构为例子，执行流程应该是这样的:

<div id="parent">
       父元素
       <div id="child">子元素</div>
</div>

运行一下一目了然。

var parent= document.getElementById('parent');
	console.dir(parent);
    var child = document.getElementById('child');
    parent.addEventListener('click',function(){alert('父亲在捕获阶段被点

击');},true);//第三个参数为true
    child.addEventListener('click',function(){alert('孩子被点击了');},false);
 parent.addEventListener('click',function(){alert('父亲在冒泡阶段被点击

了');},false);//第三个参数为false

　

　　可以看到，第三个即用来指定是否在捕获阶段进 true捕获阶段，false没有捕获阶段 。
如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，后面会有应
用的栗子。

四、事件委托机制

　　委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后
再对其进行相关处理。

　

五、jQuery中的事件监听方式
　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的
函数分别是unbind、die、undelegate、off。这几个方法已经对各种浏览器的兼容性进行封装。
具体方法可以查看手册。
   注意几点:
   jQuery推荐事件的绑定都使使用on方法
   jQuery默认事件不在捕获中进行

六、什么是自定义事件
张鑫旭的《js-dom自定义事件》

七、一个简单例子
点击弹窗之外任何地方，弹框关闭。

方法：给body绑定事件，在事件的执行函数里关闭弹框；
     给弹框元素绑定点击事件，在事件的执行函数里面组织事件冒泡，即：
     event.stopPrapagation()；

 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Ereignismodelle in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!