jquery binding events and JS binding events

jquery Binding Event:

<div id= "Click1" >bind event </div><!--If there is a dynamic element, it cannot be triggered--
<div id= "Click2" >one</div><!--can only be clicked once-
<div id= "Click3" >live</div><!--has been deprecated-
<div id= "Click4" >
<div class= "Click4child" >delegate</div>
</div>
<div id= "Click5" >
<div class= "Click5child" >on</div>
</div>
The corresponding code:

jquery Binding Click event Start
$ ("#click1"). Bind ("click", Function () {
Alert ("Bind event");
});
$ ("#click2"). One ("click", Function () {
Alert ("one event");
});
/*$ ("#click3"). Live ("Click", Function () {
Alert ("Live");
});*/
$ ("#click4"). Delegate (". Click4child", "click", Function () {
Alert ("Delegate");
});
$ ("#click5"). On ("click", ". Click5child", function () {
Alert ("on");
});

JS Binding event:

<div id= "Click6" >ADDEVENTLISTENER</DIV>
<div id= "Click7" >CLICK7</DIV>
<div ID = "Click8" onclick= "Click8 ()" >CLICK8</DIV>
<div id= "Click9";
      <div class= "Click9child1" >child1
            <div class= "Click9child2" >child2
                 <div class= "click9child3" >CLILD3</DIV>
& nbsp           </div>
      </div>
</div>
<div id= "CLI Ck10
      <div class= "Click10child1" >child1
            & Lt;div class= "Click10child2" >CHILD2</DIV>
      </div>
</div>
Corresponding Code:

JS Event binding notation
document.getElementById ("Click6"). AddEventListener ("click", Function () {
Alert ("AddEventListener");
});//The last parameter defaults to False, which indicates bubbling; true means capture
document.getElementById ("Click7"). onclick = function () {
Alert (1);
}
function Click8 () {
Alert ("Click8");
}

var click9 = document.getElementById ("Click9");
var click9child1 = document.getelementsbyclassname ("click9child1") [0];
var click9child2 = document.getelementsbyclassname ("click9child2") [0];
var click9child3 = document.getelementsbyclassname ("click9child3") [0];

Click9child1.addeventlistener ("click", Function () {
Alert (1);
});
Click9child2.addeventlistener ("click", Function () {
Alert (2);
},true);
Click9child3.addeventlistener ("click", Function (event) {
Alert (3);
Event.stoppropagation ();//Stop bubbling
});

When doing this, if you want to click Child3, the order of occurrence is 2,3,1. Why? Child1 represents bubbling, child2 represents capture, child3 is bubbling.
To click Child3, First look at its parent's parent, from top to bottom (child1,child2,child3), because the order of the results is (CHILD2,CHILD3,CHILD1), regardless of when the capture is executed and then bubbled.
If you want to click on Child2, also first look at the parent's parent, from the top to the bottom of the order is (CHILD1,CHILD2), so the results are sorted out in the order (2,1)
IE8 below does not support the above wording

Let's look at the wording of the bind event that supports IE
var click10 = document.getElementById ("Click10");
var click10child1 = document.getelementsbyclassname ("click10child1") [0];
var click10child2 = document.getelementsbyclassname ("click10child2") [0];

Click10.attachevent ("onclick", function () {
Alert ("Click10");
});
Click10child1.attachevent ("onclick", function () {
Alert ("Click10child1");
});
Click10child2.attachevent ("onclick", function (event) {
Alert ("Click10child2");
Event.cancelbubble = true; Stop bubbling
});

Here's a syntax for all browser-compatible event bindings

<!--compatible with all browsers-->
<div id= "click11";
    <div class= "Click11child1" >child1
          <div class= "Click11child2" >CHILD2</DIV>
    </div>
</div>
to refer to a common file eventutil.js before writing the code, with the following file:

var eventutil = {
     addhandler:function (element,type,handler) {
        & nbsp if (Element.addeventlistener) {
              Element.addeventlistener (type, handler);
         } else if (element.attachevent) {
            &NBS P Element.attachevent ("on" +type,handler);
         } else {
              element["on" + type] = Handler
         }
   },
    Stoppropagation:function (event) {
        &NBSP;IF ( event.stoppropagation) {
             event.stoppropagation ();
         } else {
             event.cancelbubble = true;< br>         }&NBSP
   }
}

var click11 = document.getElementById ("click11");
var click11child1 = document.getelementsbyclassname ("click11child1") [0];
var click11child2 =document.getelementsbyclassname ("click11child2") [0];
Eventutil.addhandler (CLICK11, "click", Function () {
Alert ("Click11");
});
Eventutil.addhandler (Click11child1, "click", Function () {
Alert ("Click11child1");
});
Eventutil.addhandler (Click11child2, "click", Function (event) {
Alert ("Click11child2");
Eventutil.stoppropagation (event);
});

These I just wrote to add an event to the element and block the bubbling method, and subsequent additions, if any, will be added. If there is a problem, please point out.

jquery binding events and JS binding events