Home > Developer > Web Develop
Description of addEventListener (attachEvent) in javascript, addeventlistener
AddEventListener has three parameters: the first parameter indicates the event name (not including on, such as "click"), the second parameter indicates the function for Receiving Event processing, and the third parameter is useCapture. Example:
<Button type = "button"> click me </button> <script type =" text/javascript "> var obj = document. getElementsByTagName ("button") [0]; function fun () {alert (0);} function fun2 () {alert (1);} function fun3 () {alert (2) ;}// if this is the case, only fun3 will be executed, and JS will not be overloaded (in JAVA, reload can be implemented based on different parameters, even if the function name is the same, but JS does not work, JS can use argument. length and if are used to simulate overloading) obj. onclick = fun; obj. onclick = fun2; obj. onclick = fun3; // all three functions are executed. The execution sequence is method1-> method2-> method3, but IE8 and below are not supported (with attachEvent) if (window. addEventListener) {obj. addEventListener ("click", fun, false); // For more information about the role of the third parameter, see jsonobj. addEventListener ("click", fun2, false); // The default value of the third parameter is false. Therefore, if this parameter is not set, the default value is false obj. addEventListener ("click", fun3, false);} else if (window. attachEvent) {obj. attachEvent ("onclick", fun); // note that attachEvent does not have 3rd parameters obj. attachEvent ("onclick", fun2); // pay attention to this onclick instead of click obj. attachEvent ("onclick", fun3); // the execution order is the opposite. For method3-> method2-> method1, you can write the function in reverse order like FF. That is: // obj. attachEvent ("onclick", fun3); // obj. attachEvent ("onclick", fun2); // obj. attachEvent ("onclick", fun) ;}</script>
The application differences of the third parameter are as follows:
<Div id = "div_test"> <input id = "btn_test" type = "button" value = "web Front-end development-css119"/> </div> <script type =" text/javascript ">/// <! [CDATA [window. onload = function () {document. getElementById ("div_test "). addEventListener ("click", test1, true); // change the 3rd parameters to false to see the effect document. getElementById ("btn_test "). addEventListener ("click", test2, true); // change the 3rd parameters to false to see the effect} function test1 () {alert ("outer div triggered")} function test2 () {alert ("inner input triggering")} //]> </script>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Window. onload = function (){
Var even = event. srcElement? Event. srcElement: event.tar get // event.tar get under firefox = event. srcElement compatible version under IE
For (var I = 0; I <5; I ++ ){
Var obj = document. createElement ("div ");
Obj. innerHTML = "div" + I;
If (window. attachEvent ){
Obj. attachEvent ("onclick", function () {alert (even. innerHTML)}); // modify the location
}
Else {
Obj. addEventListener ("click", function () {alert (even. innerHTML)}, false); // modify the location
}
Document. body. appendChild (obj );
}
}
</Script>
</Head>
<Body>
</Body>
</Html>
AttachEvent in javascript
Used in FIREFOX
Document. addEventListener
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
