JS Basics-Event binding (event snooping)

There are three ways to listen for JavaScript events, respectively:

1, event monitoring a inclusion in the HTML tag

1 <div id= "box" onclick= "alert (' HELLO World ')" >2   <div id= "Box2" onclick= "notice ();" ></div>3   <div id= "Box3" onclick= "service (' HELLO World ');" ></div>4 </div>56function notice () {alert (HELLO World)  7

Description: The above-mentioned event listener function onclick is written in the form of the div in the oldest primitive form, supported by all major browsers.

Like inline CSS styles, they are valid (note size-sensitive), but have the same drawbacks as CSS styles written to inline.

Advantages:

1) Good compatibility , basically all browsers support this kind of way

Disadvantages are as follows:

1) reusability is not good.

2) JS and HTML inclusions to a piece, code confusion, errors are difficult to detect and eliminate, not conducive to division of labor.

3) If the changes need to modify both HTML and JS, the change is relatively difficult.

In order to solve the above problems to improve the event monitoring form as follows, the following methods are currently one of the mainstream use.

2, Event monitoring method two on+ "event"

1 <  ID= "box"></div>23var box = document.getElementById ("box"); 4 5 Box.onclick = function () {6    alert ("Hellow World"); 7 };

Description: It is one of the most common forms to completely separate events from HTML in the form above.

The above is sufficient for general projects. However, this binding cannot be done if you want to click to execute multiple functions at once:

  1  box.onclick = function   () {  2   FnA ();   3   FnB ();   4  };   5  function   FnA () {  alert ("I will be executed"   7  }   8  function   FnB () {  alert (" I will also be executed " 10 } 

Note: In this case, alert ("Hellow World") will not be executed, that is, the following function overrides the previously declared function.

Advantages:

1) Good compatibility, basic support for all browsers

2) to achieve the separation of the document and JS, convenient for later code management

Disadvantages:

1) The same event, overwriting occurs when multiple functions are executed

3, Event monitoring method three Element.addeventlistener(event name, function, bubbling/capturing)

<div id= "box" >  <div id= "Box1" ></div>  <div id= "Box2" ></div></div>  var box = document.getElementById ("box"); Box.addeventlistener ("Click", FnA,false); Box.addeventlistener ("Click", FnB,false); function FnA () {        alert ("HELLO world! ");} function FnB () {        alert ("HI china! ");}

The above two functions FA (), FB () will be executed, no overwrite occurs.

Introduction to use:

Addeventlistene is the standard syntax for DOM2, and the new version of the mainstream browser is basically supported. However, the old version of IE browser is not supported;

This method of binding has three parameters:

The first is the event type and does not require an on prefix, but the event name needs to be "";
The second parameter is the function to invoke when the event occurs;

The third is a Boolean value of True or FALSE. (the default value is False)
The false code is handled with a bubbling event stream and is generally false.
True means that the code is processed in a capture-type event stream, not necessarily deprecated.

Advantages:

1) to achieve the separation of JS and HTML documents, easy to maintain code;

2) does not occur to the on+ "event" function coverage phenomenon;

3) Provide listening events to be executed in an optional way that bubbles or captures

Disadvantages:

1) compatibility is not perfect, boss IE browser does not support;

2) method name is longer, memory is slightly difficult

Note : Use the element.removeeventlistener (type,listener,usecapture)method to remove the actual that has been added.
How to use: Box.removeeventlistener ("click", Fnb,false);

4, the characteristics of IE browser type:

The old version of IE browser has its own methods attachevent and detachevent.
The syntax format is as follows:
Element.attachevent ("onclick", listenerfunction)//Add Event
Element.detachevent ("onclick", listenerfunction)//Delete event

JS Basics-Event binding (event snooping)