Three ways to bind events in JavaScript and remove binding _javascript tips

In JavaScript, there are three common methods of binding events

The first approach

function written in the structure layer

Very bad, so that the page is very confusing, behavior and structure can not be separated

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

The second way to bind events

Benefits: Behavior and structure begin to separate

Disadvantages:

The second binding method can only give one time to bind a handler function

That is, a. onclick = fn1; onclick = fn2 the ultimate effect isonclick = fn2

<select name= "Xueli" >
 <option value= "" > Please select Education </option>
 <option value= "University" > University </ option>
 <option value= "Middle School" > Middle School </option>
 <option value= "junior High School" > Junior High </option> 
 <option value= "PRIMARY" > Primary </option> 
</select>
<form action= ">
 <p>email: <input type= "text" name= "email" >
  name: <input type= "text" Name= "Ming" >
 </p>
</form >

document.getElementsByTagName (' select ') [0].onclick= function () {
  alert (' Hee ');
 }
Document.getelementsbyname (' email ') [0].onblur=function () {
 alert (' hahaha ');
}

Window.onload = function () {
 var d = document.getElementById (' school ');
 function fn1 () {
  alert (' Hello ');
 }
 function fn2 () {
  alert (' World ');
 }
 D.onclick = fn1;//Assignment operation eventually displays fn2
 D.onclick = fn2;
}

A third way to bind events

Error writing 1
window.onload = function () {
 var d = document.getElementById (' school ');
 function fn1 () {//this points to window
  this.style.background = ' Blue ' at this point;
 }
 function fn2 () {//this points to window
  this.style.background = ' red ' at this point;
 }
 Write an anonymous function
 //FINAL occurrence error
 D.onclick = function () {
  fn1 ();
  FN2 ();
  The Fn1 fn2 is actually the property window Window.fn1 () window.fn2 ()
  
  
 }
}

This is not a problem, but it adds two extra variables to the DOM tree.

Window.onload = function () {
 var d = document.getElementById (' school ');
 D.FN1 = function () {//FN1 is the property of D finally this point to the DOM object
  this.style.background = ' blue ';
 }
 D.FN2 = function () {//this point to DOM object
  this.style.background = ' red ';
 }
 
 The anonymous function calls the above two functions
 D.onclick = function () {
  this.fn1 ();
  This.fn2 ();
 }

Not using the onclick

Window.onload = function () {
 var d = document.getElementById (' school ');
 Reached a binding of two functions
 d.addeventlistener (' click ', function () {alert (' Blue '); this.style.background = ' blue '});
 D.addeventlistener (' click ', function () {alert (' red '); this.style.background = ' red '});
 

Remove binding cannot use anonymous function anonymous function was then created then disappeared

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);/Only fn1
 d.removeeventlistener (' click ', fn2);

The third method of binding events under IE

<div id= "School" >
 
 </div>
 <input type= "button" value= "plus event" onclick= "Adde ();" >
 <input type= "button" value= "Minus event" 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 is a post bound event that occurs first
  d.attachevent (' onclick ', fn1);
  D.attachevent (' onclick ', fn2); FN2 occurs first
 }
function Reme () {
 var d = document.getElementById (' school ');
 D.deltachevent (' click ', fn1);/Only fn1
 d.deltachevent (' click ', fn2);

Summarize

These are the three ways to bind events and remove bindings in JavaScript, and I hope this article will help you learn or use JavaScript, if you have any questions, you can leave a message, thank you for your support to the cloud-dwelling community.