Analyse du contenu de la liaison d'événements DOM en javascript

Le contenu de cet article concerne l'analyse du contenu de la liaison d'événements DOM en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Événement DOM niveau 2

element.addEventListener(type,handler,boolean)
La première valeur représente le type d'événement, sans on.
La seconde est la méthode d'exécution. (Fonction de gestionnaire d'événements)
La troisième valeur est une valeur booléenne, la valeur par défaut est fausse et n'est exécutée que pendant la phase de bouillonnement. true signifie s'exécuter dans la phase de capture

element.removeEventListener(type,handler,boolean)
La première valeur représente le type d'événement, sans on.
La seconde est la méthode d'exécution. (Fonction de gestionnaire d'événements)
La troisième valeur est une valeur booléenne, la valeur par défaut est fausse et n'est exécutée que pendant la phase de bouillonnement. true pour exécuter l'événement de suppression
pendant la phase de capture. L'utilisation est cohérente avec addEventListener.

element.attachEvent(type,handler) Liaison d'événement IE.
element.detachEvent(type, handler) Suppression de l'événement IE.
La première valeur représente le type d'événement, plus les suivants.
La seconde est la méthode d'exécution. (Fonction de gestion des événements),
Étant donné que le modèle d'événement d'IE n'a qu'un modèle bouillonnant, seules deux valeurs doivent être transmises

Ajouter une liaison d'événement entre navigateurs

var  addEvent = function(ele,type,handler){
    if(ele.addEventListener){
        ele.addEventListener(type,handler,false)
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler)
    }else{
        ele["on"+type]=handler
    }
}
addEvent(btn,"click",function(){console.log("点击")})

. Supprimer la liaison entre navigateurs

function removeEvent(ele,type,handler){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handler,false)
    }
    else if(ele.detachEvent){
        ele.detachEvent('on'+type,handler)
    }
    else{
        ele['on'+type]=null
    }
}
removeEvent(btn,"click",function(){console.log("点击")})

Événement DOM niveau 0
sur-attribut en HTML

<button id="btn" onclick="console.log(1)">确定</button>
<button id="btn" onclick="fn()">确定</button>

Les caractères entre guillemets sont des chaînes exécutables
Depuis la méthode on dans HTML couple étroitement js et HTML, il n'est pas propice à une maintenance ultérieure, il n'est donc pas recommandé.

Événement DOM niveau 0

var btn=document.getElementById("btn")
btn.onclick=function(){
    console.log(1);
}
btn.onclick=function(){
    console.log(2);
}//2

Si vous ajoutez le même événement, le dernier écrasera l'événement précédent

Recommandations associées :

Explication détaillée de la liaison d'événement DOM dans js

Explication détaillée de l'utilisation de la liaison d'événement DOM dans JQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!