Maison > Article > interface Web > Analyse détaillée de la description de l'événement natif js (code joint, simple et clair)

Analyse détaillée de la description de l'événement natif js (code joint, simple et clair)

亚连original: 2018-05-18 14:29:011945parcourir

Voici les événements natifs js que j'ai compilés pour vous. Les étudiants intéressés peuvent y jeter un œil.

1. Flux d'événements
Le flux d'événements est principalement divisé en deux types : le bouillonnement d'événements et la capture d'événements. Les événements bouillonnent et l'élément cible reçoit l'événement en premier, puis se propage progressivement vers des nœuds moins spécifiques. La capture d'événements est exactement le contraire, l'idée principale est que les nœuds moins spécifiques reçoivent d'abord l'événement puis se propagent progressivement jusqu'au nœud cible.

<html>
    <head>
        <title>事件流</title>
    </head>
    <body>
        <div id ="testDiv"></div>
    </body>
 </html>

Lorsqu'un div est cliqué, l'événement bouillonnant reçoit l'ordre des nœuds div->body->html->document
L'événement de capture reçoit l'ordre des nœuds document->html -> ;body->div

2. Gestionnaire d'événements
a) Gestionnaire d'événements HTML
Chaque événement pris en charge par un élément peut utiliser un HTML portant le même nom que les caractéristiques du gestionnaire d'événements correspondant pour spécifier.
Inconvénients : 1. Problème de décalage horaire, l'utilisateur peut avoir cliqué sur l'élément de page avant que le navigateur n'ait analysé la fonction d'événement de clic - enveloppez l'erreur via try-catch
2. La chaîne de portée du gestionnaire d'événements est différents navigateurs peuvent produire des résultats différents.
3. Le code HTML et le code Javascript sont étroitement couplés, ce qui n'est pas propice à l'expansion et à la maintenance.
b) Gestionnaire d'événements de niveau DOM0
Attribuez la fonction à l'attribut du gestionnaire d'événements d'élément
var btn = document.getElementById("#dv");
Gestionnaire d'événements pour supprimer des éléments – btn.onclicn = null

Les gestionnaires d'événements ajoutés de cette manière sont traités pendant la phase de bouillonnement des événements.

c) Gestionnaire d'événements de niveau DOM2

Spécifiez le gestionnaire d'événements addEventListener
Supprimez le gestionnaire d'événements RemoveEventListener
Recevez trois paramètres, à savoir le nom de l'événement à traiter, la fonction du gestionnaire d'événements, la valeur booléenne (true signifie appeler le gestionnaire dans la phase de capture, false signifie appeler le gestionnaire d'événements dans la phase de bouillonnement)

Remarque : addEventListener doit être supprimé via RemoveEventListener et les paramètres doivent être cohérents, donc les fonctions anonymes ajoutées via addEventListener ne peuvent pas être retiré.

d)IE事件处理程序

attachEvent
detachEvent
两个方法接收相同的两个参数（”onclick”,”function(){}”）;
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。
注意：attach中第一个参数是onclick而不是addEventListener中的click
IE事件处理程序attachEvent添加的在全局作用域中运行

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同，所以有必要编写可以跨浏览器使用的事件处理程序。

var eventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.deatchEvent){
            element.deatch("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

上面是我整理给大家的，希望今后会对大家有帮助。

JS弹出窗口代码大全

几个前端常见的JS排序代码

JS去掉字符串前后空格或去掉所有空格的用法

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser JS natif pour implémenter la sérialisation de formulaires (tutoriel graphique)Article suivant：Utiliser JS natif pour implémenter la sérialisation de formulaires (tutoriel graphique)

Articles Liés

Voir plus