Sfat rapid Delegarea evenimentului JavaScript în 4 minute

Evenimentul delegație poate fi un subiect confuz pentru cei care nu sunt familiarizați cu acest concept. Dar, din fericire, este foarte simplu. În acest tutorial video rapid, voi demonstra conceptul în doar patru minute.

Introduceți delegația evenimentului

În schimb, cu delegarea evenimentului, pur și simplu adăugăm un singur ascultător de eveniment la un element de strămoș, poate ceva de genul "ul". Apoi, atunci când utilizatorul face clic pe unul dintre elementele copilului său, cum ar fi o etichetă de ancorare, verificăm doar dacă obiectivul clicului a fost, de fapt, o etichetă de ancorare. Dacă a fost, vom proceda ca de obicei.

$ ('ul'). faceți clic pe (funcția (e) if ($ (e.target) .is ('a')) alert ('clicked');

avantaje

• Adăugați doar un eveniment ascultător la pagină, în loc de cinci sute (în exemplul nostru)
• Elementele create dinamic vor fi totuși legate de manipularea evenimentului.

De ce funcționează acest lucru?

Funcționează datorită modului în care elementele sunt capturate (nu IE) și se balansează. De exemplu, luați în considerare următoarea structură simplă.

 
Ancoră
 

Când faceți clic pe eticheta de ancorare, faceți clic, de asemenea, pe elementele "li" și "ul" și chiar pe elementul "corp". Aceasta se numește bâzâit.

Note despre acest ecran

Rețineți că acesta este doar un exemplu simplu pentru a explica funcționalitatea. Am folosit jQuery, doar pentru că am avut patru minute să înregistrez! În acest exemplu special (vizionați mai întâi ecranul), am fi putut folosi două opțiuni alternative:

1. Treci adevărat ca parametru al metodei clone (). Aceasta ar clona apoi elementul, precum și orice manipulator de evenimente.
2. În schimb, utilizați metoda live (). Cu toate acestea, aveți grijă atunci când utilizați această metodă: acesta retușează manipularea evenimentului X de ori. Acest lucru nu este neapărat necesar.

În mare parte, acest lucru era menit să demonstreze ideea. Cu JavaScript obișnuit, puteți face ceva de genul:

// Obțineți o listă neordonată, care conține etichetele anchor var ul = document.getElementById ('items'); / / Manipulatorul evenimentului rapid și simplu pentru traversarea evenimentului - pentru a compensa funcția handlerului de atașare IE addEvent (obj, evt, fn, captură) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  altceva if (capture capture) capture = false; // capture obj.addEventListener (evt, fn, captură) // Verificați dacă nodul pe care ați făcut clic este o etichetă de ancorare. Dacă da, procedați ca de obicei. addEvent (ul, "faceți clic", funcția (e) // Firefox și IE accesează elementul țintă diferit: e.target și event.srcElement, respectiv var target = e? e.target: window.event.srcElement; dacă (target.nodeName.toLowerCase () === 'a') alertă ("clicked"); return false;);

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.