Home > Developer > JavaScript
HTML Event Handlers:
Cons: HTML and JS coupling is too high (if you change the method name then you need to change the HTML code and JS code)
Pros: Strong compatibility
1 < type= "button" id= "BTN1" value= "btn1" onclick = "alert (this.value)">
Dome Level 0 Event handlers:
Assigns a function to the property of an event.
Simple, cross-browser
1 var btn2 = document.getElementById (' btn2 '); 2 // Dome 0-level load events 3 function () {4 alert (' Hello World '); 5 }67// Dome 0-level cancel Load event 8// Btn2.onclick = null;Dome Level 2 event handler (IE9 not applicable):
Two methods AddEventListener (), RemoveEventListener ()
Receive three parameters 1. Event Name 2. Event handler function 3. Boolean value (True indicates event capture, False indicates event bubbling)
1 // Dome 2-level Load event event name does not need to be added before 2 var btn3 = document.getElementById (' btn3 '); 3 false ); 4 5 false);IE event handler (I heard that IE11 has abandoned both methods):
Two methods attachevent () DetachEvent ()
Receives two parameters, 1. event Name 2. Processing functions
Q: Why is there no boolean value here?
Answer: IE9 only supports bubbling
1 // IE event handler event name needs to be added on IE 11 has removed these two methods 2 var btn4 = document.getElementById (' btn4 '); 3 // alert (btn4[' value ']); 4 btn4.attachevent (' onclick ', btn3fun); 5 btn4.detachevent (' onclick ', btn3fun);Comprehensive Examples:
1 <HTML>Hello Javascript</title>2 3 </Head>4 5 6 <Bodybgcolor= "Yellow">7 <H1>Hello World</H1>8 <!--HTML Load Events -9 <inputtype= "button"ID= "BTN1"value= "BTN1"onclick= "alert (this.value)">Ten <inputtype= "button"ID= "BTN2"value= "BTN2"> One <inputtype= "button"ID= "Btn3"value= "Btn3"> A <inputtype= "button"ID= "Btn4"value= "Btn4"> - - </Body> the <!--Note Load Order - - <Scripttype= "Text/javascript"> - varbtn2=document.getElementById ('btn2'); - //Dome 0-level load events + Btn2.onclick= function() { - Alert ('Hello World'); + } A Btn2.onclick=Btn3fun; at //Dome Level 0 only identifies the last Load event - Btn2.onclick=Btn2fun; - //Dome 0-level cancel Load event - //Btn2.onclick = null; - - functionBtn2fun () { in Alert ('btn2'); - }; to + functionBtn3fun () { - Alert ('This is btn3 function'); the } * $ //Dome 2-level Load event event name does not need to be added beforePanax Notoginseng varBtn3=document.getElementById ('Btn3'); - Btn3.addeventlistener ('Click', Btn3fun,false); the + Btn3.addeventlistener ('Click', Btn2fun,false); A //the method of unloading an event should be the same as the parameter at load time the anonymous function cannot unload the Btn3.removeeventlistener ('Click', Btn3fun,true); + //AddEventListener added events can only be deleted by RemoveEventListener - Btn3.onclick= NULL; $ $ //IE event handler event name needs to be added on IE 11 has removed these two methods - varBtn4=document.getElementById ('Btn4'); - //alert (btn4[' value ']); the Btn4.attachevent ('onclick', btn3fun); - Btn4.detachevent ('onclick', btn3fun);Wuyi the - </Script> Wu </HTML>
About what is event bubbling, event capture see this guy's blog: http://www.cnblogs.com/janes/p/3912677.html
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
