Event bindings, event listeners, event delegates in JS

Event Bindings

To allow JavaScript to respond to a user's actions, first bind the event handler to the DOM element. The so-called event handler function is the function that handles the user operation, and different operations correspond to different names.

In JavaScript, there are three common ways to bind events:

• Bind directly in the DOM element;

• Binding in JavaScript code;

• Binds the event listener function.

To bind an event directly in the DOM

We can bind the onclick, onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeypress, onkeyup, etc. on the DOM element. A lot is not listed. If you want to know more about the event types, see DOM events.

<input type="button" value="click me" onclick="hello()"><script>function hello(){ alert("hello world!");}</script>

Binding events in JavaScript code

Binding events in JavaScript code (that is, in a script tag) separates JavaScript code from HTML tags, makes the document structurally clear and easy to manage and develop.

<input type="button" value="click me" id="btn"><script>document.getElementById("btn").onclick = function(){ alert("hello world!");}</script>

Using events to listen for bound events

Another way to bind an event is to use AddEventListener () or attachevent () to bind the event listener function. The following details, event monitoring.

Event Monitoring

About event monitoring, the 3 event stages are defined in the code, which is the capturing phase, the target stage and the bubbling stage.

At first Netscape developed a set of JavaScript event-driven mechanisms (i.e. event captures). IE also launched its own set of event-driven mechanisms (that is, event bubbling). Finally, we standardize two kinds of event mechanism, which are divided into capturing stage, target stage and bubbling stage. IE8 before IE has insisted on its own event mechanism (front-end staff has been headache compatibility problem), IE9 after IE also support the specifications.

Specifications

Grammar:

function, useCapture)

Event: (required) events name that supports all DOM events.

Function: (required) Specifies the functions to execute when the event is triggered.

Usecapture: (optional) Specifies whether the event is executed during the capture or bubbling phase. True to capture. False, bubbling. False by default.

Note: IE8 below are not supported.

<input type="button" value="click me" id="btn1"><script>document.getElementById("btn1").addEventListener("click",hello);function hello(){ alert("hello world!");}</script>

IE standard

Grammar:

function)

Event: (required) type. Need to be "on", for example: OnClick.

Function: (required) Specifies the functions to execute when the event is triggered.

<input type="button" value="click me" id="btn2"><script>document.getElementById("btn2").attachEvent("onclick",hello);function hello(){ alert("hello world!");}</script>

Benefits of event Monitoring

1. Multiple events can be bound.

<input type= "button" value=  "click me" Id= "btn3" > <script> var btn3 = document.getelementbyid (  "btn3") Btn3.onclick = function ( "Hello 1"); //do not perform}btn3.onclick = function (  "Hello 2"); //Execution} </SCRIPT>         

The regular event binding only executes the last bound event.

<input type="Button" value= "click me" Id= "btn4" > <script> var btn4 = document.getelementbyid (  "click", Hello1); Btn4.addeventlistener ( "click", Hello2); function hello1 ( "Hello 1");} function hello2 ( "Hello 2");} </SCRIPT>         

Two events have been executed.

2, you can remove the corresponding binding

<input type="Button" value="Click Me" id="Btn5" ><script>var btn5 = document.getelementbyid ( "click", Hello1); //performed Btn5.addeventlistener ( "click", Hello2); //does not perform btn5.removeeventlistener (" click ", Hello2); function hello1 ( "Hello 1");} function hello2 ( "Hello 2");} </SCRIPT>         

Encapsulating event Monitoring

<input type="Button" value="Click Me" id="Btn5" >Binding Listener EventsfunctionaddEventHandler (TARGET,TYPE,FN) {if (Target.addeventlistener) {Target.addeventlistener (TYPE,FN);}Else{target.attachevent ("On" +TYPE,FN);}}//Remove Listener event function removeEventHandler (target,type,fn) {if (Target.removeeventlistener) { Target.removeeventlistener (TYPE,FN);} else{target.detachevent ("on" +TYPE,FN);}} //Test var btn5 = document.getElementById ("btn5"); addEventHandler (Btn5,"click", Hello1);  Add Event Hello1addeventhandler (btn5,"click", Hello2);  Add Event Hello2removeeventhandler (btn5,"click", Hello1);  Remove event Hello1                

Event delegate

Event delegation is the use of the principle of bubbling, the event is added to the parent or ancestor elements, triggering the effect of execution.

<input type="button" value="click me" id="btn6">var btn6 = document.getElementById("btn6");document.onclick = function(event){event = event || window.event;var target = event.target || event.srcElement;if(target == btn6){alert(btn5.value);}}

Above is just an example, the code is as simplified as possible. In the actual code we may use jquery's Live (), delegate (), bind (), on (), and so on.

Event Delegation Advantages

1. Improve JavaScript performance. Event delegates can significantly increase the processing speed of events and reduce the memory footprint. The example parses event delegates and event bindings in JavaScript, and this article is well written.

Traditional notation

<ul id="List" ><LiId="Item1" >item1</Li> <li id="Item2" >item2</li> <li id= "Item3" >item3</li></Ul><script>var item1 =document.getelementbyid ( "item1");  var item2 = document.getelementbyid ( "item2"); var item3 = document.getelementbyid (" Item3 "); Item1.onclick = function ( "Hello item1");} Item2.onclick = function ( "Hello item2");} Item3.onclick = function ( "Hello Item3");} </SCRIPT>          

Event delegate

<ul id="List" ><LiId="Item1" >item1</Li> <li id="Item2" >item2</li> <li id= "Item3" >item3</li></Ul><script>var item1 =document.getElementById ("Item1");var item2 =document.getelementbyid ( "item2");  var item3 = document.getelementbyid ( "Item3"); document.addeventlistener (" click ", function (event) {var target = Event.target; if (target = = item1) {alert ( "Hello item1");} else if (target = = item2) {alert ( " Hello item2 "); }else if (target = = item3) {alert ( " Hello Item3 "); }}) </SCRIPT>          

2. Dynamic addition of DOM elements, do not need to modify the event binding because of element changes.

Traditional notation

<ul id="List" ><LiId="Item1" >item1</Li> <li id="Item2" >item2</li> <li id= "Item3" >item3</li></Ul><script>var list =document.getElementById ("List");var item = list.getelementsbytagname ( "Li"); for (var i=0;i<item.length;i++) {(function (i) {Item[i].onclick = function (var node=document.createelement (  "Li"); var textnode=document.createtextnode ( </SCRIPT>      

Click Item1 to Item3 There are event responses, but when you click Item4, there is no incident response. Description Traditional event bindings cannot dynamically add events to dynamically added elements.

Event delegate

<ul id="List" ><LiId="Item1" >item1</Li> <li id="Item2" >item2</li> <li id= "Item3" >item3</li></Ul><script>var list = document.getelementbyid (  "list"); document.addeventlistener ( "click", function (event) {var target = event.target; if (target.nodename =  "LI") {alert (target.innerhtml);}}) var node=document.createelement (  "Li"); var textnode=document.createtextnode ( </SCRIPT>      

When you click Item4, ITEM4 has an event response. Description event delegates can add events dynamically for newly added DOM elements.

Event bindings, event listeners, event delegates in JS