Drei Möglichkeiten, Ereignisse in JavaScript zu binden und die Bindung zu entfernen

In JavaScript gibt es drei häufig verwendete Methoden zum Binden von Ereignissen

Die erste Methode

Die Funktion wird in die Strukturebene geschrieben

Sehr schlimm, es macht die Seite sehr verwirrend und das Verhalten und die Struktur können nicht getrennt werden

<input type="button" onclick="func();">

Die zweite Möglichkeit, Ereignisse zu binden

Vorteile: Verhalten und Struktur beginnen sich zu trennen

Nachteile:

Bei der zweiten Bindungsmethode kann nur eine Verarbeitungsfunktion an eine Zeit gebunden werden

Das heißt, .onclick = fn1; .onclick = fn2 Der endgültige Effekt ist onclick = fn2

<select name="xueli" >
 <option value="">请选择学历</option>
 <option value="大学" >大学</option>
 <option value="中学">中学</option>
 <option value="初中">初中</option>
 <option value="小学">小学</option>
</select>
<form action="">
 <p>Email:<input type="text" name="email">
  姓名：<input type="text" name="ming" >
 </p>
</form>

document.getElementsByTagName('select')[0].onclick= function (){
  alert('嘻嘻');
 }
document.getElementsByName('email')[0].onblur=function (){
 alert('哈哈哈');
}

window.onload = function(){
 var d = document.getElementById('school');
 function fn1(){
  alert('hello');
 }
 function fn2(){
  alert('world');
 }
 d.onclick = fn1;//赋值操作 最终显示fn2
 d.onclick = fn2;
}

Der dritte Weg, Ereignisse zu binden

//错误写法1
window.onload = function(){
 var d = document.getElementById('school');
 function fn1(){//this此时指向window
  this.style.background = 'blue';
 }
 function fn2(){//this此时指向window
  this.style.background = 'red';
 }
 //写一个匿名函数
 //最终的出现错误
 d.onclick = function (){
  fn1();
  fn2();
  //fn1 fn2是属性window的 实际上是这样 window.fn1() window.fn2()
   
   
 }
}

Mit dem folgenden Weg gibt es kein Problem des Schreibens, aber der DOM-Baum fügt zwei zusätzliche Variablen hinzu

window.onload = function(){
 var d = document.getElementById('school');
 d.fn1 = function (){//fn1是d的属性 最终this此时指向DOM对象
  this.style.background = 'blue';
 }
 d.fn2 = function (){//this此时指向DOM对象
  this.style.background = 'red';
 }
  
 //匿名函数 调用上面两个函数
 d.onclick = function (){
  this.fn1();
  this.fn2();
 }
}

verwendet onclick nicht mehr

window.onload = function(){
 var d = document.getElementById('school');
 //达到了一次绑定两个函数
 d.addEventListener('click',function () {alert('blue');this.style.background ='blue'});
 d.addEventListener('click',function () {alert('red');this.style.background ='red'});
  
}

Sie können anonyme Funktionen nicht zum Entfernen der Bindung verwenden. Anonyme Funktionen verschwinden, wenn sie generiert werden.

var fn1 = function () {alert('blue');this.style.background ='blue'};
var fn2 = function () {alert('red');this.style.background ='red'};
  
function adde(){
  var d = document.getElementById('school');
  d.addEventListener('click',fn1);
  d.addEventListener('click',fn2);
 }
function reme(){
 var d = document.getElementById('school');
 //d.removeEventListener('click',fn1);//只剩fn1
 d.removeEventListener('click',fn2);
}

Die dritte Möglichkeit, Ereignisse zu binden IE

 

<div id="school">
  
 </div>
 <input type="button" value="加事件" onclick="adde();">
 <input type="button" value="减事件" onclick="reme();">

 

var fn1 = function () {alert('blue');this.style.background ='blue'};
var fn2 = function () {alert('red');this.style.background ='red'};
  
function adde(){
  var d = document.getElementById('school');
  // IE6,7是后绑定的事件先发生
  d.attachEvent('onclick',fn1);
  d.attachEvent('onclick',fn2); //fn2先发生
 }
function reme(){
 var d = document.getElementById('school');
 //d.deltachEvent('click',fn1);//只剩fn1
 d.deltachEvent('click',fn2);
}