Liaison d'événements JS et analyse de cas de modèle de flux d'événements

Cette fois, je vais vous présenter une analyse de cas de la liaison d'événements JS et du modèle de flux d'événements. Quelles sont les précautions lors de l'utilisation de la liaison d'événements JS et du modèle de flux d'événements. un regard.

1. Événements JS

(1) Classement des événements JS

1. :

click/dbclick/mouseover/mouseout

2. Événements HTML :

 onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

3. Événements clavier :

keydown : déclenchés lorsque le clavier est enfoncé
keypress : le clavier est enfoncé Et il se déclenche au moment où il est soulevé.
keyup : déclencher lorsque le clavier est relevé

[Notes]

①Séquence d'exécution : keydown keypress keyup
②keypress ne peut capturer que des chiffres, des lettres, des touches de symboles, mais pas les touches de fonction.
③Cycle keydown - une pression prolongée sur la touche
④Keydown n'a pas nécessairement de keyup. Lorsqu'elle est enfoncée longuement, le focus est perdu et la touche keyup ne sera plus déclenchée
⑤keypress est sensible à la casse, keydown et kewup ne le sont pas. différent.

4. Facteur d'événement :

Lorsqu'un événement est déclenché, l'événement transmettra un paramètre à la fonction appelée par l'événement par défaut.

Ce paramètre est un événement. les facteurs comprennent diverses informations détaillées sur l’événement.

 document.onkeydown=function(e){
 console.log(e);
 }
document.onkeydown=function(){
console.log(window.event);
}

//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}

5. Comment déterminer les touches du clavier ?

①Dans la fonction de redémarrage, recevez le facteur d'événement e.
②Vous pouvez utiliser e.key pour accéder directement au caractère de touche enfoncé (non recommandé).
③Vous pouvez utiliser keyCode/which/charCode pour obtenir la valeur du code ASCII de la clé.

(compatible avec divers navigateurs)

 var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}      
if(e.keyCode==13){
isEnt=1;
}    
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}

2. ÉvénementModèle de liaison

(1) Modèle d'événement DOM0

Remarques sur la liaison :

①Utilisez window.onload pour effectuer la liaison après le chargement.

window.onload =function(){//事件}

② Placez-le derrière le corps pour le relier.

//body内容
6c04bd5ca3fcae76e30b72ad730ca86d
  ac6d94d45af08d62f601c60315a41ead内联模型绑定65281c5ac262bf6d81768915a4a77ac0
  2b35a4bd2f218298ed835abd930b5962哈哈哈哈65281c5ac262bf6d81768915a4a77ac0
  fa1cdecaa9f71d90ec149b54d5226970DOM2模型绑定65281c5ac262bf6d81768915a4a77ac0
  4318a98e4d103d446d721f73b458035e取消DOM265281c5ac262bf6d81768915a4a77ac0
36cc49f0c466276486e50c850b7e4956

1. Modèle en ligne (liaison en ligne) : utilisez le nom de la fonction directement comme valeur d'attribut de l'attribut dans la balise html.

ac6d94d45af08d62f601c60315a41ead内联模型绑定65281c5ac262bf6d81768915a4a77ac0

Inconvénients : Il ne respecte pas les spécifications de base du w3c sur la séparation du contenu et du comportement.

2. Modèle de script (liaison dynamique) : sélectionnez un nœud dans JS puis ajoutez l'attribut onclick au nœud.

document.getElementById("btn1")=function(){}

Avantages : Il est conforme aux spécifications de base du w3c sur la séparation du contenu et du comportement, et réalise la séparation du html et du js.
Inconvénients : un même nœud ne peut ajouter qu'une seule fois des événements du même type. S'il est ajouté plusieurs fois, le dernier prendra effet.

document.getElementById("btn1").onclick=function(){
  alert(1234);  
}
document.getElementById("btn1").onclick=function(){
  alert(234);  
}//重复的只能出现最近的一次

3.DOM0 présente un inconvénient commun : les événements liés via DOM0 ne peuvent pas être annulés une fois liés.

document.getElementById("btn3").onclick=function(){//不能取消匿名函数
  if(btn.detachEvent){
    btn.detachEvent("onclick",func1);
  }else{
    btn.removeEventListener("click",func1);
  }
    alert("取消DOM2");
}

(2) Modèle d'événement DOM2

1. Ajoutez une liaison d'événement DOM2 :

①Avant IE8, utilisez .attachEvent("onclick", function);
②Après IE8, utilisez .addEventListener("click", function, true/false);
Paramètre trois : false (par défaut) signifie un bouillonnement d'événement, passer true signifie une capture d'événement.
③Compatible avec toutes les méthodes de traitement du navigateur :

 var btn=document.getElementById("btn1");
 if(btn.attachEvent){
 btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
 }else{
 btn.attachEventListener("click",func1);
 }

2 Avantages de la liaison DOM2 :

①Le même nœud peut être lié à plusieurs événements du même type à l'aide de DOM2 .
②Les événements liés à l'aide de DOM2 peuvent être annulés avec des fonctions spéciales.
3. Annuler la liaison d'événement :
① Utilisez attachEvent pour lier et utilisez detachevent pour annuler.
②Utilisez attachEventListener pour lier et utilisez removeEventListeter pour annuler.
Remarque : Si l'événement lié à DOM2 doit être annulé, lors de la liaison de l'événement, la fonction de rappel doit être un nom de fonction,
et ne peut pas être une fonction anonyme, car lorsque l'événement est annulée, la fonction de rappel Entrez le nom de la fonction à annuler.

3. Modèle de flux d'événements JS

(1) Modèle de flux d'événements en JS

1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
 ① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
 ② 除此之外的所有事件绑定均为事件冒泡。

4. 阻止事件冒泡：

 ① IE10之前，e.cancelBubble = true;
 ② IE10之后，e.stopPropagation();

5. 阻止默认事件：

 ① IE10之前：e.returnValue = false;
 ② IE10之后：e.preventDefault();

//css
#p1{
  width: 300px;;
  height: 300px;
  background-color: powderblue;
}
#p2{
  width: 200px;
  height: 200px;
  background-color: deeppink;
}
#p3{
  width: 100px;
  height: 100px;
  background-color:#A9A9A9;
}
//html
1543e05224819c12ab8136df28db3a2e
  5daf0f4c91d62e4731d4aa9ee9a1b709
    7280f502980e0d5ec16910135c6538dc94b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
6b4fa9013772f692d8c074f2d220e434超链接5db79b134e9f6b82c0b36e0489ee08ed
p1.addEventListener("click",function(){
  console.log("p1 click");
},false);
p2.addEventListener("click",function(){
  console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},false);

结果（事件冒泡）（由小到大p3-》p2-》p1）：

p1.addEventListener("click",function(){
  console.log("p1 click");
},true);
p2.addEventListener("click",function(){
  console.log("p2 click");
},true);
p3.addEventListener("click",function(){ 
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},true);

结果(事件捕获)（由小到大p3-》p2-》p1）：

//依然遵循事件冒泡
document.onclick=function(){
  console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//阻止默认事件
function eventHandler(e) {
  e = e || window.event;
// 防止默认行为 
   if (e.preventDefault) {
     e.preventDefault(); //IE10之后
  } else {
     e.returnValue = false; //IE10之前  
  }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现无缝轮播与左右点击步骤详解

nodejs更改项目端口号步骤详解

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!