Three ways to bind events in JavaScript and remove binding

In JavaScript, there are three commonly used methods to bind events

The first method

Functions are written in the structure layer

Very bad, it makes the page very confusing, and the behavior and structure are not separated

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

The second way to bind events

Benefits: Behavior and structure begin to separate

shortcoming:

In the second binding method, only one time can be given to bind one processing function.

Right now.onclick = fn1; . onclick = fn2 The final result isonclick = fn2

&lt;select name="xueli" &gt;
 &lt;option value=""&gt;Please select an education&lt;/option&gt;
 &lt;option value="University" &gt;University&lt;/option&gt;
 &lt;option value="School"&gt;Middle School&lt;/option&gt;
 &lt;option value="junior high school"&gt;junior high school&lt;/option&gt; 
 &lt;option value="primary school"&gt;primary school&lt;/option&gt; 
&lt;/select&gt;
&lt;form action=""&gt;
 &lt;p&gt;Email:&lt;input type="text" name="email"&gt;
  Name：&lt;input type="text" name="ming" &gt;
 &lt;/p&gt;
&lt;/form&gt;

('select')[0].onclick= function (){
  alert('whee');
 }
('email')[0].onblur=function (){
 alert('Hahaha');
}

 = function(){
 var d = ('school');
 function fn1(){
  alert('hello');
 }
 function fn2(){
  alert('world');
 }
  = fn1;//Assignment operation finally displays fn2  = fn2;
}

The third way to bind events

//Error writing method 1 = function(){
 var d = ('school');
 function fn1(){//This points to window at this time   = 'blue';
 }
 function fn2(){//This points to window at this time   = 'red';
 }
 //Write an anonymous function //The final error occurred  = function (){
  fn1();
  fn2();
  //fn1 fn2 is the property window. Actually, it is window.fn1() window.fn2()  
  
 }
}

There is no problem with the following writing method, but two additional variables are added to the DOM tree.

 = function(){
 var d = ('school');
 d.fn1 = function (){//fn1 is the property of d. Finally this points to the DOM object at this time.   = 'blue';
 }
 d.fn2 = function (){//this points to the DOM object at this time   = 'red';
 }
 
 //Anonymous function Call the above two functions  = function (){
  this.fn1();
  this.fn2();
 }
}

Not using onclick

 = function(){
 var d = ('school');
 //Binding two functions at a time has been achieved ('click',function () {alert('blue'); ='blue'});
 ('click',function () {alert('red'); ='red'});
 
}

Remove bindings. Anonymous functions cannot be used. Anonymous functions are generated at that time. Disappear at that time.

var fn1 = function () {alert('blue'); ='blue'};
var fn2 = function () {alert('red'); ='red'};
 
function adde(){
  var d = ('school');
  ('click',fn1);
  ('click',fn2);
 }
function reme(){
 var d = ('school');
 //('click',fn1);//Only fn1 remains ('click',fn2);
}

The third method of binding events under IE

&lt;div &gt;
 
 &lt;/div&gt;
 &lt;input type="button" value="Add Event" onclick="adde();"&gt;
 &lt;input type="button" value="Reduce Events" onclick="reme();"&gt;

var fn1 = function () {alert('blue'); ='blue'};
var fn2 = function () {alert('red'); ='red'};
 
function adde(){
  var d = ('school');
  // IE6, 7 is the event bound after the first occurrence  ('onclick',fn1);
  ('onclick',fn2); //Fn2 occurs first }
function reme(){
 var d = ('school');
 //('click',fn1);//Only fn1 remains ('click',fn2);
}

Summarize

The above are three ways to bind events and remove binding in JavaScript. I hope the content of this article will be helpful to everyone to learn or use Javascript. If you have any questions, you can leave a message to communicate. Thank you for your support.