Explication détaillée d'exemples de modèle d'événement en JS

J'étais relativement clair sur le modèle d'événement auparavant, et de nombreux concepts étaient clairement cartographiés dans mon esprit. Après avoir travaillé, d'une part, j'ai utilisé
limitations, et d'autre part, je me suis habitué à utiliser diverses méthodes de surveillance des événements dans le cadre. La simplicité est synonyme de commodité. Au fil du temps, certains concepts d'événements ont commencé à
. disparaître de ma mémoire, tout comme moi maintenant. J'ai commencé à oublier les pointeurs du langage C, les équations de Maxwell, les transformations matricielles, la méthode des moindres carrés
, etc. La connaissance est comme des pavés colorés qui ouvrent la voie, du simple au profond, du profond à la compréhension,
vous aidant toujours à aller de plus en plus loin. Revenons au modèle événementiel.

1. Brève introduction des événements
Les événements incluent :
Événement de souris
Événement de clavier
Événement de cadre lors d'une erreur de redimensionnement onscroll etc.
Événement de formulaire surflou surfocus etc.
Événement de presse-papiers surcopie surcoupe surcolle
Impression de l'événement surafterprint suravantimpression
Faites glisser l'événement surdrag ondragenter etc.
Événement média surlecture en pause
Événement d'animation animationend
Événement de transition
Autres événements, etc.

Les événements sont encapsulés dans des objets, y compris
Objet d'événement cible
Objet d'écoute d'événement
Objet d'événement de souris
Objet d'événement de clavier , etc.
Ils contiennent leurs propres propriétés et méthodes, et héritent également de l'objet Event. Cela dépend de votre W3C.
Méthodes courantes :
event.preventDefault()//Empêche le comportement par défaut des éléments, tels que les sauts de liens et les soumissions de formulaires ;
event.preventDefault()//Empêche le bouillonnement d'événements

2. Trois modèles d'événements
1. Modèle d'événement original (niveau DOM 0)
Caractéristiques : Dans le modèle d'événement original, les événements y sont il n'y a pas de concept de propagation après occurrence, pas de flux d'événements. Lorsqu’un incident survient, gérez-le immédiatement.
La fonction d'écoute n'est qu'une valeur d'attribut de l'élément, et l'auditeur est lié en spécifiant la valeur d'attribut de l'élément. Il existe deux méthodes d'écriture :

HTML : dfe8e6650259415a310b5c2a526a89f0
js : document.getElementsById('btn').onclick = func

Avantages : Tous les navigateurs sont compatibles

Inconvénients :
a. Il n'y a pas de séparation entre la logique et l'affichage
b. puis lié écrasera le précédent.
c. Impossible de passer le bouillonnement d'événements, la délégation et d'autres mécanismes.

Dans le développement modulaire actuel de programmes Web et de logiques plus complexes, cette méthode est évidemment obsolète, elle n'est donc pas recommandée dans les projets réels. Il est acceptable d'écrire des démos dans la vie quotidienne, et la vitesse est relativement. rapide.

2. Modèle d'événement IE Caractéristiques : IE définit l'objet événement comme attribut de fenêtre dans la fonction de traitement. Une fois l'exécution de la fonction terminée, il est défini sur null<.> .
Le modèle d'événement d'IE ne comporte que deux étapes. Tout d'abord, la fonction d'écoute de l'élément est exécutée, puis l'événement bouillonne le long du nœud parent jusqu'au document.
Méthode pour lier et libérer la fonction d'écoute :
attachEvent("eventType","handler"), où evetType est le type d'événement, tel que onclick, assurez-vous d'ajouter
'on'.
La méthode pour désactiver l'écouteur d'événements est detachEvent("eventType", "handler" );
Inconvénient : Elle ne peut être utilisée que par IE lui-même, qui est trop froid.

3. Modèle d'événement DOM2

Le modèle d'événement est standardisé dans les événements DOM W3C niveau 2, c'est-à-dire le modèle d'événement DOM2. Les navigateurs modernes (sans compter IE9 et versions antérieures) suivent tous cette spécification. Caractéristiques :
Dans le modèle d'événement développé par le W3C, l'occurrence d'un événement comprend trois processus :
Phase de capture d'événement. L'événement se propage depuis le document jusqu'à l'élément cible. Au cours de ce processus, il est à son tour vérifié si les nœuds de passage
points ont enregistré une fonction d'écoute pour l'événement, et si oui, l'exécutent.
b. Étape de traitement des événements. Lorsque l'événement atteint l'élément cible, la fonction de traitement d'événement de l'élément cible est exécutée
c. L'événement monte de l'élément cible jusqu'à ce qu'il atteigne le document. Il vérifie également si les nœuds passants ont enregistré
la fonction d'écoute pour l'événement, et l'exécute si c'est le cas.


Remarque :

Tous les types d'événements passeront par la phase de capture d'événement, mais seuls certains événements passeront par la phase de bouillonnement d'événement. Par exemple, l'événement

soumettre ne sera pas diffusé. . Méthode pour lier et débloquer la fonction d'écoute :
addEventListener("eventType", "handler", "true|false"); où eventType fait référence au type d'événement

ne pas ajouter. le préfixe 'on', différent de celui sous IE.

Le deuxième paramètre est la fonction de traitement,
Le troisième paramètre permet de préciser s'il faut entrer dans la phase de capture vrai pendant la phase de capture faux uniquement dans la phase de bouillonnement
La suppression de l'écouteur est également similaire : RemoveEventListner("eventType", "handler","true!false");


Compatible avec IE et les navigateurs modernes, méthode d'écriture d'écoute d'enregistrement d'événement

现有的框架和类库都会对适应各种浏览器做兼容性的封装，JQuery底层即使用了上面的兼容性写法。

 

三、事件的捕获-冒泡机制
DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和
冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。

以如下HTML结构为例子，执行流程应该是这样的:

<div id="parent">
       父元素
       <div id="child">子元素</div>
</div>

运行一下一目了然。

var parent= document.getElementById('parent');
	console.dir(parent);
    var child = document.getElementById('child');
    parent.addEventListener('click',function(){alert('父亲在捕获阶段被点

击');},true);//第三个参数为true
    child.addEventListener('click',function(){alert('孩子被点击了');},false);
 parent.addEventListener('click',function(){alert('父亲在冒泡阶段被点击

了');},false);//第三个参数为false

　

　　可以看到，第三个即用来指定是否在捕获阶段进 true捕获阶段，false没有捕获阶段 。
如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，后面会有应
用的栗子。

四、事件委托机制

　　委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后
再对其进行相关处理。

　

五、jQuery中的事件监听方式
　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的
函数分别是unbind、die、undelegate、off。这几个方法已经对各种浏览器的兼容性进行封装。
具体方法可以查看手册。
   注意几点:
   jQuery推荐事件的绑定都使使用on方法
   jQuery默认事件不在捕获中进行

六、什么是自定义事件
张鑫旭的《js-dom自定义事件》

七、一个简单例子
点击弹窗之外任何地方，弹框关闭。

方法：给body绑定事件，在事件的执行函数里关闭弹框；
     给弹框元素绑定点击事件，在事件的执行函数里面组织事件冒泡，即：
     event.stopPrapagation()；

 

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!