Addeventlistener and attachevent usage

You may be familiar with IE's attachevent method. Now let's talk about the usage of Firefox's addeventlistener.

The addeventlistener has three parameters. Syntax:

Element. addeventlistener (type, listener, usecapture)

Below is a detailed explanation

• Element is the object to bind the function.
• Type is the event name. Note that you should change "onclick" to "click" and "onblur" to "Blur", that is, the event name should not contain "on ".
• Of course, listener is the bound function. Remember not to enclose it with parentheses.
• The last parameter is a Boolean value indicating the Event Response sequence. The following describes the 3rd parameters of addeventlistener (usecapture ).

If usercapture is true, the browser uses capture. If it is false, the browser uses the bubbing method. We recommend that you use false. Let's look at an example.

HtmlCode

<Div id = "div_test"> <input type = "button" id = "btn_test" value = "se4.cn technology base"/> </div>

JS Code

Window. onload = function () {document. getelementbyid ("div_test "). addeventlistener ("click", test1, false); document. getelementbyid ("btn_test "). addeventlistener ("click", Test2, false);} function test1 () {alert ("outer Div triggered")} function Test2 () {alert ("inner input triggered ")}

Try it by yourself. If usercapture is true, test1 is triggered first. If usercapture is false, Test2 is triggered first.

 

 

 

 

 

 

 

 

 

In recent work, the attachevent method is used. This method can append other processing events to an event, which may be useful sometimes. Here we will summarize its basic usage.

For more information about its syntax, see the DHTML manual. Here is an example from the Internet:

Document. getelementbyid ("BTN"). onclick = Method1;
Document. getelementbyid ("BTN"). onclick = method2;
Document. getelementbyid ("BTN"). onclick = method3;
If this is the case, only medhot3 will be executed.

Write as follows:
VaR btn1obj = Document. getelementbyid ("btn1 ");
// Object. attachevent (event, function );
Btn1obj. attachevent ("onclick", Method1 );
Btn1obj. attachevent ("onclick", method2 );
Btn1obj. attachevent ("onclick", method3 );
The execution sequence is method3-> method2-> Method1

If the Mozilla series does not support this method, you need to use addeventlistener.
VaR btn1obj = Document. getelementbyid ("btn1 ");
// Element. addeventlistener (type, listener, usecapture );
Btn1obj. addeventlistener ("click", Method1, false );
Btn1obj. addeventlistener ("click", method2, false );
Btn1obj. addeventlistener ("click", method3, false );
The execution sequence is Method1-> method2-> method3