Add multiple event handlers for HTML elements

Method One: Directly in the HTML code, the onclick binding time for the element (DOM Level 0 event)

<button onclick= "alert (' Hello ')" > button </button>

Cons: HTML and JS code blend, high coupling, modification inconvenient

Method Two: Use JavaScript's DOM programming, get the element node, and then bind the event

<button id= "btn" > button </button><script>//Scheme one: Binds the anonymous function document.getElementById ("BTN"). onclick= function () {alert ("Hello");} Scenario Two: Binding function name function ShowMsg () {alert ("Hello");} document.getElementById ("Btn"). onclick=showmsg;//Note that when you bind a function name without parentheses, parentheses, the function executes immediately and assigns the result to onclick// document.getElementById ("Btn"). Onclick=showmsg ();</script>    

　　

　　

Method Three: Use AddEventListener and RemoveEventListener (DOM Level 2 events)

Both of these methods require three parameters,

The first parameter is the event to be processed (click, mouseout, MouseOver ...), and be careful not to add on

The second parameter is the handler to bind (such as the showmsg or anonymous function above)

The third parameter indicates that the selection event bubbled (inside Out) or event capture (out-of-the-inside), false indicates selection event bubbling (recommended), true means select event capture

<button id= "btn1" > button 1</button><button id= "btn2" > button 2</button><script>var btn1 = document.getElementById ("btn1"); Btn1.addeventlistener ("Click", Function () {alert ("Hello One");},false); var btn2 = document.getElementById ("btn2"), function ShowMsg () {alert ("Hello");} Btn2.addeventlistener ("click", Showmsg,false);</script>

Events added through AddEventListener can only be canceled using RemoveEventListener, and the three parameters of RemoveEventListener are the same as the three parameters of AddEventListener. Therefore, it is advisable not to use the form of an anonymous function when binding an event, as long as the function name is used.

<button id= "btn" > button </button><script>var btn = document.getElementById ("btn"); function ShowMsg () { Alert ("Hello");} Add Event Btn.addeventlistener ("click", Showmsg,false);//Cancel Event Btn.removeeventlistener ("click", Showmsg,false); </ Script>

Attention:

1, DOM level 0 events, and DOM Level 2 events can bind multiple handlers for the same event (for example, the Click event) in the same order as the binding.

2. After binding multiple events to the same event (onclick) of the element node using JavaScript, the latter overwrites the previous one, so only the last bound event handler is preserved. However, you can use recursive algorithm implementations to bind multiple event handlers , such as the following code

<button id= "btn" > button </button><script>var btn = document.getElementById ("btn"); function addevent ( node, func) {var old = node.onclick;if (typeof Node.onclick! = "function") {Node.onclick = func;} else {Node.onclick = Func tion () {old (); Func ();}}} function Showone () {alert ("one");} function Showtwo () {alert ("both");} Addevent (BTN, Showone); Addevent (BTN, Showtwo);</script>

　　

3. If you do not use the Addevent (node, func) in the code above, the direct use of Btn.onclick=function () {} overwrites the method one directly in the HTML code to bind the event, and Addevent does not.

4, if an element node using method one at the same time, directly in the element node onclick binding event, while using method two as in the onclick above the binding event, and then use AddEventListener to add the onclick event, finally, the order of execution is:

The handler execution order using the method three bindings is later than method one and method Two, note the above Note 3

　　

Add multiple event handlers for HTML elements