1. Übersicht
Die Eventdelegation, auch als Eventagentur bekannt, hat folgende zwei Hauptziele:
- Fügen Sie zukünftig dynamisch Ereignisse für neue Elemente hinzu
- Verbessern Sie die Leistung: Jede Funktion (Ereignis) belegt Speicherplatz. Fügen Sie einfach einen Ereignishandler hinzu, um alle Ereignisse zu vertreten, wodurch weniger Speicherplatz belegt wird.
Das verwendete Prinzip ist der Ereignisblasenmechanismus .
2 Detailliert
2.1 Ereignis
2.2 Ereignisauslösemechanismus
Ereigniserfassungs- und Ereignisblasenmechanismus
- Ereigniserfassung
Wenn ein Ereignis ausgelöst wird, wird es vom Fensterobjekt ausgelöst und durchläuft weiterhin die untergeordneten Knoten bis zum Zielknoten. Der Prozess, bevor das Ereignis den Zielknoten erreicht, ist die Erfassungsphase. Alle übergebenen Knoten lösen entsprechende Ereignisse aus - Ereignisblasen
Wenn das Ereignis den Zielknoten erreicht, kehrt es in der Erfassungsphase auf derselben Route zurück. In ähnlicher Weise lösen alle übergebenen Knoten das entsprechende Ereignis aus.
Verstehen Sie die beiden Ereignismechanismen anhand von Beispielen:
Beispiel: Angenommen, der Body und die Divs unter dem Body-Knoten sind an ein Klickereignis gebunden.
Wirkung:
Wenn das Ereignis erfasst wird (Capture: true) ), führen Sie zuerst das Body-Ereignis und dann das Div-Ereignis aus.
Wenn Sie nach dem Ereignis sprudeln (Capture: false), führen Sie zuerst das Div-Ereignis und dann das Body-Ereignis aus
body.addEventListener('click',function(){
console.log('打印body')
})
test.addEventListener('click',function(){
console.log('打印test')
})
//结果:打印test 打印body
body.addEventListener('click',function(){
console.log('打印body')
},true)
test.addEventListener('click',function(){
console.log('打印test')
})
//结果:打印body 打印test
Ich glaube, dass ich jetzt wahrscheinlich das Prinzip der Ereignisdelegation verstehe!