Le concept des événements
Événement: fait référence à certains moments d'interaction spécifiques qui se produisent dans un document ou une fenêtre de navigateur. Nous pouvons planifier des événements via des auditeurs (ou des gestionnaires) afin que le code correspondant soit exécuté lorsque l'événement se produit.
1. Flux d'événement
1. Flux d'événements: décrit l'ordre dans lequel les événements sont acceptés dans la page
2. Bubbles d'événements: reçu par l'élément le plus spécifique, puis propagé vers le haut étape par étape vers le nœud de l'élément le moins spécifique (document)
3. Capture de l'événement: le nœud le moins spécifique reçoit l'événement en premier, tandis que le nœud le plus spécifique devrait recevoir l'événement en dernier.
2. Gestion des événements
1.HTML Traitement des événements: Ajouter directement à la structure HTML
2. Traitement des événements de niveau DOM0: attribuez une fonction à un attribut de gestionnaire d'événements
3. Gestion des événements de niveau DOM2:
AddeventListener ("Nom de l'événement", "Fonction du gestionnaire d'événements", valeur booléenne)
vrai: capture d'événement
Faux: Bubbles d'événements
retireEventListener ();
4. IE Événements Gérélateur
attachement
detachettent
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <title> </tapt> </ad> <body> <div id = "div"> <Button id = "btn1"> Button </utton> </div> <! - <pripter> function Demo () {alert> script> varml event handling ");} btn1 = document.getElementById("btn1");btn1.onclick = function(){alert("Hello DOM0 level event handler")};//overrided btn1.onclick = function(){alert("Hello DOM0 level event handler 2")};btn1.onclick = function(){alert("Hello DOM0 level event handler 3 ")}; </cript> -> <! - <script> var btn1 = document.getElementById (" btn1 "); btn1.addeventListener (" cliquez ", demo1); btn1.addeventlistener (" cliquez ", DEMO2); btn1.addeventListener (" click ", demo3); fonction demo1 () {allo1 (altern Handler d'événements 1 ");} fonction Demo2 () {alert (" DOM2 NIVEAU HANDER EVENTS 2 ");} fonction Demo3 () {alert (" Dom2 Level Event Handler 3 ");} btn1.reMoveEventListener (" clique document.getElementById ("btn1"); if (btn1.addeventListener) {btn1.addeventListener ("cliquez", démo);} else if (btn1.attachevent) {btn1.attachevent ("onclick", démo)} else {btn1.onclic Demo () {alert ("Hello");} </cript> </ body> </html>Iii. Objet de l'événement
1. Objet de l'événement: un objet sera généré lorsque l'événement DOM sera déclenché.
2. Événement de l'objet de l'événement:
Type: Obtenez le type d'événement
cible: obtenir l'objectif de l'événement
stopPropagation (): empêcher les événements des bulles
empêchédefault (): Bloquer le comportement par défaut de l'événement
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <title> </ title> </ head> <body> <div id = "div"> <button id = "btn1"> Button </utton> <a href = "http://ww.baidu.com" id = "AID"> baidu </a> </div> <script> document.getElementById ("btn1"). AddEventListener ("cliquez", showType); document.getElementByid ("div"). AddeventListener ("cliquez", showdiv); document.getElementyid ("aid"). showType (événement) {// alert (event.type); alert (event.target); event.stoppropagation (); // stop event bubbles} function showDiv () {alert ("div")} function showa (event) {// event.stoppropagation (); // event.preventDefault ();} </ body>;