JavaScript-Ereignisbindungs-Lernpunkte_Grundkenntnisse

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');
 };
};

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');
} 

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');
} 

b:

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');
}

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'); //执行本事件
}

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;
}

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,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉

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);
}

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);

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');
}

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);

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);
}

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);

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');
});

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

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

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

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
 });
});

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);
}

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
 });
});

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);
 }
}

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);
 }
}

Zielobjekt browserübergreifend abrufen

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

调用方式：

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);
}

四.事件对象的其他补充

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对象
 });
});

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对象
 });
});

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;
 }
}

屏蔽跳转操作

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

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

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');
}

那么跨浏览器的兼容：

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

右键菜单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);
 })
});

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

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

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

鼠标滚轮（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;
 }
}

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

DOMContentLoaded事件和readystatechange事件

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

Verwandte Etiketten：

javascript事件绑定

Quelle：php.cn

Vorheriger Artikel：Detaillierte Erläuterung praktischer Möglichkeiten zum Erstellen von Objekten und zur Objektvererbung in JavaScript_Grundkenntnisse Nächster Artikel：jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Was ist eine NullPointerException und wie behebe ich sie?
  2024-10-22 09:46:29
• Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen
  2024-10-13 13:53:41
• Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger
  2024-10-12 12:15:51
• C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer
  2024-10-11 22:47:31
• Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger
  2024-10-11 19:36:51
• Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger
  2024-10-11 15:50:41
• Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger
  2024-10-11 15:07:41
• PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung
  2024-10-11 14:21:21
• Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen
  2024-10-11 12:59:11
• Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten
  2024-10-11 12:17:31

Aktuelle Ausgaben

JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

Aus 2024-04-06 15:35:24

0

1

274

vue vee-validate erfasst das Problem der Datumsauswahlauswahl Die V-Modell-Bindung in meinem Datepicker-Feld funktioniert nicht richtig. Wenn Sie eine A...

Aus 2024-04-06 11:38:56

0

1

510

Wie kann man auf bestimmte Klickereignisse achten, andere jedoch unterdrücken? Meine Webanwendung enthält eine HTML-Tabelle, in der jede Zeile auf eine bestimmte URL ver...

Aus 2024-04-04 16:55:27

0

1

317

Herausforderungen bei der Verwendung von window.location.href zum Weiterleiten auf eine neue Seite Ich habe Probleme mit der Umleitung zu einer lokalen Domänen-PHP-Datei. Ich habe sie für d...

Aus 2024-04-04 12:57:06

0

1

446

Warum bleiben meine Kontrollkästchen immer noch hängen und können nicht auf ihre Standardwerte zurückgesetzt werden? Ich habe gerade diese Funktion erstellt, um den Seitentitel nach dem Klicken auf die Umsch...

Aus 2024-04-04 00:14:23

0

1

390

verwandte Themen

Mehr>

• WeChat-Momente können nicht aktualisiert werden
• Was ist mobiles HD?
• Fall bei Verwendung von SQL
• Java-Ausnahmebehandlung
• Lösung dafür, dass die Ordnereigenschaften von Win7 keine Registerkartenseite freigeben
• lightbox.js
• Bluescreen-Code 0x000009c
• So zeigen Sie HTML in der Mitte an