JavaScript-Ereignisbindungs-Lernpunkte_Grundkenntnisse-js-Tutorial-php.cn

Die Ereignisbindung ist in zwei Typen unterteilt: die eine ist die traditionelle Ereignisbindung (Inline-Modell, Skriptmodell) und die andere ist die moderne Ereignisbindung (DOM2-Level-Modell). Die moderne Event-Bindung bietet im Vergleich zur herkömmlichen Bindung leistungsfähigere und praktischere Funktionen.

1 Probleme mit der traditionellen Ereignisbindung

Das Inline-Modell bei der traditionellen Ereignisbindung wird nicht besprochen und wird selten verwendet. Schauen wir uns zunächst das Skriptmodell an. Das Skriptmodell weist einer Ereignisbehandlungsfunktion eine Funktion zu. Traditionelle Bindung wie:

window.onload=function(){
 var box=document.getElementById('box');
 box.onclick = function(){
  alert('Lee');
 };
};

Nach dem Login kopieren

Problem 1: Eine Ereignisbehandlungsfunktion löst zwei Ereignisse aus

Wenn eine Seite zwei oder mehr Js hat und das erste Js vom ersten Programmierer entwickelt wird, wird das zweite Js vom zweiten Programmierer entwickelt. Das erste window.onload wird überschrieben, z. B.

window.onload=function(){
 alert('Lee');
};

window.onload=function(){
 alert('Mr.lee');
}

Nach dem Login kopieren

Das Ergebnis wurde gerade von Mr.lee gedruckt

Tatsächlich gibt es Möglichkeiten, dieses Problem zu lösen. Schauen Sie sich die folgenden zwei Formen an.
a:

alert(window.onload);//一开始没有注册window.onload,那么就是null

window.onload=function(){
 alert('Lee');
};

alert(window.onload);//如果已经有window.onload,打印的是函数function

window.onload=function(){
 alert('Mr.lee');
}

Nach dem Login kopieren

alert(typeof window.onload);//一开始没有window.onolad,旧版火狐显示undefined,新版显示object,

window.onload=function(){
 alert('Lee');
};

alert(typeof window.onload);//如果已经有window.onload,所有浏览器都会显示function

window.onload=function(){
 alert('Mr.lee');
}

Nach dem Login kopieren

Es gibt also eine Lösung.

 window.onload=function(){
 alert('Lee');
};

if(typeof window.onload=='function'){
 var saved=null;//保存上一个事件对象
 saved=window.onload;
}

//saved 就是window.onload,saved()相当于window.onload(),但是window.onload()不能执行的
//所以saved()相当于window.onload=function(){}

window.onload=function(){
 if(saved){
  saved();//执行上一个事件 window.onload=function(){}
 }
 alert('Mr.lee'); //执行本事件
}

Nach dem Login kopieren

Frage 2: Ereignisumschalter
Wechseln Sie ein Div mit der ID der Box, lassen Sie den roten und blauen Hintergrund im Inneren direkt wechseln und öffnen Sie die Box einmal, bevor Sie wechseln, z. B.:

window.onload=function(){
 var box=document.getElementById('box');
 box.className="red";
 box.onclick=function(){
  alert('Lee'); //只执行了一次
  blue.call(this);//通过匿名函数执行某一函数，那么里面的this就是代表的window,所以可以通过call传递
 };
}

function blue(){
 this.className="blue";
 this.onclick=red;
 
}

function red(){
 this.className="red";
 this.onclick=blue;
}

Nach dem Login kopieren

Obwohl der obige Code die Umschaltfunktion implementiert, wird das Popup-Feld nur einmal ausgeführt.

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addEvent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}
addEvent(window,'load',function(){
 var box=document.getElementById("box");
 //addEvent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addEvent(box,'click',blue);
});

function red(){
 this.className="red";
 addEvent(box,'click',blue);
}

function blue(){
 this.className="blue";
 addEvent(box,'click',red);
}

//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉

Nach dem Login kopieren

Laut obigem Code ist im Kommentar ein Fehler aufgetreten. Die Lösung lautet wie folgt:

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addEvent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}


//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉


//移除事件函数
function removeEvent(obj,type){
 if(obj['on'+type]){
  obj['on'+type]=null;
 }
}


addEvent(window,'load',function(){
 var box=document.getElementById("box");
 //addEvent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addEvent(box,'click',blue);
});

function red(){
 this.className="red";
 removeEvent(this,'click');
 addEvent(box,'click',blue);
}

function blue(){
 this.className="blue";
 removeEvent(this,'click');
 addEvent(box,'click',red);
}

Nach dem Login kopieren

Zwei W3C-Ereignisbehandlungsfunktionen
addEventListener() und removeEventListener()
Es gibt zwei W3C-Ereignisverarbeitungsfunktionen: addEventListener() und removeEventListener().

//W3C verfügt über zwei Ereignisse zum Hinzufügen und Löschen
1. Abdeckungsproblem, gelöst

window.addEventListener('load',function(){
 alert('Lee');
},false);

window.addEventListener('load',function(){
 alert('Mr.Lee');
},false);

window.addEventListener('load',function(){
 alert('Mrs.Lee');
},false);

Nach dem Login kopieren

2. Das Problem der Blockierung derselben Funktion ist gelöst

window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
function init(){
 alert('Lee');
}

Nach dem Login kopieren

3. Ist es möglich, dies zu bestehen und zu lösen
Beispiel 1:

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',function(){
  alert(this);
 },false);
},false);

Nach dem Login kopieren

Beispiel 2:

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',blue,false);
},false);

function red(){
 this.className="red";
 this.removeEventListener('click',red,false);
 this.addEventListener('click',blue,false);
}

function blue(){
 this.className="blue";
 this.removeEventListener('click',blue,false);
 this.addEventListener('click',red,false);
}

Nach dem Login kopieren

4. Eine zusätzliche Methode hinzufügen. Wird sie überschrieben oder kann sie nur einmal ausgeführt werden

window.addEventListener('load',function(){
 var box=document.getElementById('box');
 box.addEventListener('click',function(){
  alert('Lee');
 },false);
 box.addEventListener('click',blue,false);
},false);

Nach dem Login kopieren

Zusammenfassend lässt sich sagen, dass W3C diese Probleme perfekt gelöst hat und sehr einfach zu verwenden ist. IE8 und frühere Browser unterstützen dies jedoch nicht. Stattdessen verwenden sie ihre eigenen Ereignisse von W3C. Zwei Event-Handling-Funktionen.

W3C kann Bubbling- und Capture-Methoden festlegen.

Browser, die den W3C-Standard unterstützen, verwenden beim Hinzufügen von Ereignissen die Methode addEventListener(event,fn,useCapture). Der dritte Parameter useCapture in der Basis ist ein boolescher Wert, der verwendet wird, um festzulegen, ob das Ereignis während der Ereigniserfassung ausgeführt wird wenn das Ereignis beim Einweichen ausgeführt wird. Browser, die nicht mit W3C (IE) kompatibel sind, verwenden die Methode attachmentEvent(). Diese Methode hat keine relevanten Einstellungen. Das Ereignismodell des IE wird jedoch standardmäßig ausgeführt, wenn das Ereignis „sprudelt“, also wenn useCapture gleich „false“ ist Setzen Sie es ein Es ist sicherer, useCapture bei der Verarbeitung von Ereignissen auf false zu setzen, und es wird auch Browserkompatibilität erreicht.

Ereigniserfassungsphase: Das Ereignis beginnt mit der Beschriftung der obersten Ebene und sucht nach unten, bis das Ereignisziel (Ziel) erfasst wird.

Event-Bubbling-Phase: Das Event beginnt beim Event-Ziel (target) und sprudelt bis zum Top-Level-Label der Seite.
Die Ausbreitung von Ereignissen kann gestoppt werden:
Verwenden Sie in W3c die stopPropagation()-Methode
Setzen Sie cancelBubble = true unter IE

3. IE-Ereignisbehandlungsfunktion

attachEvent() und detachEvent()

IE implementiert zwei Methoden, die denen in DOM ähneln: attachmentEvent() und detachEvent(). Beide Methoden akzeptieren dieselben Parameter: Ereignisname und Funktion.

Wenn wir diese beiden Funktionssätze verwenden, sprechen wir zunächst über die Unterschiede: 1. Der IE unterstützt keine Erfassung, sondern nur das Bubbling. 2. Das Hinzufügen von Ereignissen durch den IE kann keine doppelten Funktionen blockieren DOM-Objekt. 4. Bei herkömmlichen Ereignissen kann der IE keine Ereignisobjekte akzeptieren, bei der Verwendung von attchEvent ist dies jedoch möglich, es gibt jedoch einige Unterschiede.

1. Das Abdeckungsproblem ist gelöst, aber es gibt Unterschiede. Das Ergebnis ist Mrs.Lee, Mr.Lee und schließlich Lee

window.attachEvent('onload',function(){
 alert('Lee');
});

window.attachEvent('onload',function(){
 alert('Mr.Lee');
});
window.attachEvent('onload',function(){
 alert('Mrs.Lee');
});

Nach dem Login kopieren

2. Das Problem der Blockierung derselben Funktion wurde nicht gelöst.

window.attachEvent('onload',init);
window.attachEvent('onload',init);

function init(){
 alert('Lee');
}

Nach dem Login kopieren

3. Kann dies bestanden werden? Nein, das bezieht sich auf das Fenster. Es muss die Aufrufmethode verwendet werden.

window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.attachEvent('onclick',function(){
  //alert(this===box);
  alert(this===window); //true
 });
});

Nach dem Login kopieren

Der nächste Weg besteht darin, window.event.srcElement zu übergeben. Der Code lautet wie folgt:

window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.attachEvent('onclick',blue);
});

function red(){
 var that=window.event.srcElement;
 that.className="red";
 that.detachEvent('onclick',red);
 that.attachEvent('onclick',blue);
}

function blue(){
 var that=window.event.srcElement;
 that.className="blue";
 that.detachEvent('onclick',blue);
 that.attachEvent('onclick',red);
}

Nach dem Login kopieren

4. Eine zusätzliche Methode hinzufügen. Wird sie überschrieben oder kann sie nur einmal ausgeführt werden.

Bei der herkömmlichen Bindung kann der IE keine Ereignisobjekte durch Parameterübergabe wie W3C akzeptieren, dies kann jedoch mit attachmentEvent() erfolgen.

 window.attachEvent('onload',function(){
 var box=document.getElementById('box');
 box.onclick=function(evt){ //传统方法IE无法通过参数获取evt
  alert(evt);//undefined
 }
 box.attachEvent('onclick',function(evt){
  alert(evt);//object
  alert(evt.type);//click
  alert(evt.srcElement.tagName);//DIV
  alert(window.event.srcElement.tagName);//DIV
 });
});

Nach dem Login kopieren

Browserübergreifende Kompatibilität

Browserübergreifende Ereignisse

function addEvent(obj,type,fn){
 if(obj.addEventListener){
  obj.addEventListener(type,fn,false);
 }else if(obj.attachEvent){
  obj.attachEvent('on'+type,fn);
 }
}

Nach dem Login kopieren

Browserübergreifendes Entfernungsereignis

function removeEvent(obj,type,fn){
 if(obj.removeEventListener){
  obj.removeEventListener(type,fn,false);
 }else if(obj.detachEvent){
  obj.detachEvent('on'+type,fn);
 }
}

Nach dem Login kopieren

Zielobjekt browserübergreifend abrufen

function getTarget(evt){
 if(evt.target){
  return evt.target;
 }else if(window.event.srcElement){
  return window.event.srcElement;
 }
}

Nach dem Login kopieren

调用方式：

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'click',blue);
});


function red(evt){
 var that=getTarget(evt);
 that.className="red";
 removeEvent(that,'click',red);
 addEvent(that,'click',blue);
}

function blue(evt){
 var that=getTarget(evt);
 that.className="blue";
 removeEvent(that,'click',blue);
 addEvent(that,'click',red);
}

Nach dem Login kopieren

四.事件对象的其他补充

relatedTarget事件

w3c中的一个relatedTarget事件。
例如：

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'mouseover',function(evt){
  alert(evt.relatedTarget); //得到移入box最近的那个DOM对象
 });
 
 addEvent(box,'mouseout',function(evt){
  alert(evt.relatedTarget); //从box移出最近的那个DOM对象
 });
});

Nach dem Login kopieren

IE提供了两组分别用于移入移出的属性fromElement和toElement,分别对应mouseover和mouseout。

addEvent(window,'load',function(){
 var box=document.getElementById('box');
 addEvent(box,'mouseover',function(){
  alert(window.event.fromElement.tagName); //得到移入box最近的那个DOM对象
 });
 
 addEvent(box,'mouseout',function(){
  alert(window.event.toElement.tagName); //从box移出最近的那个DOM对象
 });
});

Nach dem Login kopieren

PS:fromElement和toElement如果分别对应相反的鼠标事件，没有任何意义。

剩下要做的就是跨浏览器兼容操作：

function getTarget(evt){
 var e=evt || window.event;
 if(e.srcElment){ //IE
  if(e.type=='mouseover'){
   return e.fromElement.tagName;
  }else if(e.type="mouseout"){
   return e.toElement.tagName;
  }
 }else if(e.relatedTarget){ //w3c
  return e.relatedTarget;
 }
}

Nach dem Login kopieren

屏蔽跳转操作

取消事件的默认行为有一种不规范的做法，就是返回false。

link.onclick=function(){
 alert('Lee');
 return false;
}

Nach dem Login kopieren

PS:虽然return false；可以实现这个功能，但是有漏洞。
第一：必须写到最后，这样导致中奖的代码执行后，有可能执行不到return false;
第二:return false 写到最前那么之后的自定义操作就失效了。
所以最好的办法应该是在最前面就阻止默认行为，并且后面的代码还可以执行。

link.onclick=function(evt){
 evt.preventDefault;//w3c,阻止默认行为
 alert('Lee');
}

link.onclick=function(evt){
 window.event.returnValue=false;//IE,阻止默认行为
 alert('Lee');
}

Nach dem Login kopieren

那么跨浏览器的兼容：

function preDef(evt){
 var e=evt || window.event;
 if(e.preventDefault){
  e.preventDefault();
 }else{
  e.returnValue=false;
 }
}

Nach dem Login kopieren

右键菜单contextmenu
兼容：

function preDef(evt){
 var e=evt || window.event;
 if(e.preventDefault){
  e.preventDefault();
 }else{
  e.returnValue=false;
 }
}

addEvent(window,"load",function(){
 var body=document.getElementsByTagName('body')[0];
 addEvent(body,'contextmenu',function(evt){
  preDef(evt);
 })
});

Nach dem Login kopieren

PS：contextmenu事件很常用，这直接导致浏览器兼容性较为稳定。

卸载前事件：beforeunload
这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。

addEvent(window,'beforeonload',function(){
 preDef(evt);
});

Nach dem Login kopieren

鼠标滚轮（mousewheel）和DOMMouseScroll
用于获取鼠标上下滚轮的距离

addEvent(document,'mousewheel',function(evt){ //非火狐
 alert(getWD(evt));
});

addEvent(document,'DOMMouseScroll',function(evt){ //火狐
 alert(getWD(evt));
});

function getWD(evt){
 var e=evt|| window.event;
 if(e.wheelDelta){
  return e.wheelDelta;
 }else if(e.detail){ //火狐
  return -evt.detail*30;
 }
}

Nach dem Login kopieren

PS：通过浏览器检测可以确定火狐只执行DOMMouseScroll。

DOMContentLoaded事件和readystatechange事件

DOMContentLoaded事件和readystatechange事件，有关DOM加载方面的事件。