Fallanalyse von JS-Ereignisbindung und Ereignisflussmodell

Dieses Mal werde ich Ihnen eine Fallanalyse der JS-Ereignisbindung und des Ereignisflussmodells vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JS-Ereignisbindungs- und Ereignisflussmodells? ein Blick.

1. JS-Ereignisse

(1) JS-Ereignisklassifizierung

1 :

click/dbclick/mouseover/mouseout

2. HTML-Ereignis:

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

3. Tastaturereignis:

Tastendruck: Wird ausgelöst, wenn die Tastatur gedrückt wird und angehoben. Wird sofort ausgelöst.

Tastendruck: Auslösen, wenn die Tastatur angehoben wird

[Notizen]

①Ausführungssequenz: Tastendruck Tastendruck Tastendruck

②Tastendruck kann nur Zahlen, Buchstaben und Symboltasten erfassen, nicht jedoch Funktionstasten.

③Taste nach unten wechseln – Tastendruck bei langem Drücken
④Taste nach unten muss nicht unbedingt nach oben gedrückt werden. Bei langem Drücken geht der Fokus verloren und die Taste nach oben wird nicht mehr ausgelöst.
⑤Bei Tastendruck wird die Groß-/Kleinschreibung beachtet, bei Tastendruck und Kewup gilt dies nicht anders.

4. Ereignisfaktor:

Wenn ein Ereignis ausgelöst wird, übergibt das Ereignis standardmäßig einen Parameter an die vom Ereignis aufgerufene Funktion.

Dieser Parameter ist ein Ereignis Faktoren enthalten verschiedene detaillierte Informationen zum Ereignis.

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

rrree

5. Wie ermittelt man die Tastaturtasten?

①In der Neustartfunktion erhalten Sie den Ereignisfaktor e.

② Mit e.key können Sie direkt zum gedrückten Tastenzeichen wechseln (nicht empfohlen).

③Sie können keyCode/which/charCode verwenden, um den ASCII-Codewert des Schlüssels abzurufen.

(Schreiben kompatibel mit verschiedenen Browsern)

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

2. EreignisBindungsmodell ( 1) DOM0-Ereignismodell

Bindungshinweise:

①Verwenden Sie window.onload zum Binden, nachdem der Ladevorgang abgeschlossen ist.

window.onload =function(){//事件}② Legen Sie es zum Binden hinter den Körper.

 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("你输入的是回车键");
}
}

1. Inline-Modell (Inline-Bindung): Verwenden Sie den Funktionsnamen direkt als Attributwert des Attributs im HTML-Tag.

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

Nachteile: Es entspricht nicht den grundlegenden Vorgaben des W3C zur Trennung von Inhalt und Verhalten.

2. Skriptmodell (dynamische Bindung): Wählen Sie einen Knoten in JS aus und fügen Sie dann das Onclick-Attribut zum Knoten hinzu.

ac6d94d45af08d62f601c60315a41ead内联模型绑定65281c5ac262bf6d81768915a4a77ac0

Vorteile: Es entspricht den grundlegenden Spezifikationen des W3C zur Trennung von Inhalt und Verhalten und realisiert die Trennung von HTML und JS.

Nachteile: Derselbe Knoten kann Ereignisse desselben Typs nur einmal hinzufügen. Bei mehrmaligem Hinzufügen wird das letzte wirksam.

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

3.DOM0 weist einen allgemeinen Mangel auf: Ereignisse, die über DOM0 gebunden sind, können nach der Bindung nicht abgebrochen werden.

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

(2) DOM2-Ereignismodell

1. DOM2-Ereignisbindung hinzufügen:

①Vor IE8 verwenden Sie .attachEvent("onclick", function);

②Nachher IE8, verwenden Sie .addEventListener("click", function, true/false);

Parameter drei: false (Standard) bedeutet Ereignissprudeln, die Übergabe von true bedeutet Ereigniserfassung.
③Kompatibel mit allen Browser-Verarbeitungsmethoden:

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

2. Vorteile der DOM2-Bindung:

①Derselbe Knoten kann mit DOM2 an mehrere Ereignisse desselben Typs gebunden werden.

②Mit DOM2 gebundene Ereignisse können mit speziellen Funktionen abgebrochen werden.

3. Ereignisbindung abbrechen:
① Verwenden Sie attachmentEvent-Bindung und detachevent zum Abbrechen.
②Verwenden Sie attachmentEventListener zum Binden und RemoveEventListenter zum Abbrechen.
Hinweis: Wenn das an DOM2 gebundene Ereignis beim Binden des Ereignisses abgebrochen werden muss, muss die
Rückruffunktion
ein Funktionsname sein, und darf keine anonyme Funktion sein, da das Ereignis auftritt Wenn die Rückruffunktion abgebrochen wird, geben Sie den Namen der abzubrechenden Funktion ein.

3. JS-Ereignisflussmodell (1) Ereignisflussmodell in 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更改项目端口号步骤详解

Das obige ist der detaillierte Inhalt vonFallanalyse von JS-Ereignisbindung und Ereignisflussmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!