Home > Developer > Web Develop
Today, I saw Ali's interview question:
After reading it, start looking for answers, and then write a chestnut test:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Div> <inputtype= "button"ID= "Btn_test"value= "Test" /> </Div> <Script>window.onload=function(){ varobtn=document.getElementById ("btn_test"); if(obtn.attachevent) {//in IEObtn.attachevent ("onclick", test1);Obtn.attachevent ("onclick", test2); Obtn.attachevent ("onclick", test3);Obtn.attachevent ("onclick", test4); } Else{Obtn.addeventlistener ("Click", Test1,false); // bubbling
Obtn.addeventlistener ("Click", Test2,false); // bubbling
Obtn.addeventlistener ("Click", Test3,true); // Capture
Obtn.addeventlistener ("Click", Test4,true); // Capture
} functiontest1 () {Console.log ("test1") } functiontest2 () {Console.log ("test2") } functiontest3 () {Console.log ("test3") } functiontest4 () {Console.log ("test4") } } </Script></Body></HTML>
The test results are as follows:
IE6: the result is random;
Ie7-8 results such as:
IE9 results such as:
Non-IE browser results are as follows:
Due to the IE7~IE9 test results I was using a browser simulation, not sure of the results of the various browser versions of the accuracy, thus, the order of execution should be this:
Capture is triggered first, but at the same level which function first triggers, different browsers have differences. Non-IE browsers are executed in the binding order, ie seems to be random.
Below I add to the knowledge as above:
(1) Bubbling event: The event is triggered in the order from the most specific event target to the least specific event target (Document object).
(2) Capture event (event capturing): Events are triggered from the most imprecise object (Document object) and then to the most accurate (and can also be captured at the window level, but must be specifically specified by the developer).
(3) DOM event Flow: Supports both event models: capture-type and bubbling-type events, but capture-type events occur first. The two event streams touch all objects in the DOM, starting with the document object and ending at the Document object.
Browsers that support the Internet standard Use the AddEventListener (event,fn,usecapture) method when adding an event, Kizhong the 3rd parameter usecapture is a Boolean value that is used to set the event to be executed when the event is captured, Or when the event bubbles. and the browser (IE) is not compatible with the Attachevent () method, this method does not have the relevant settings, but the IE event model by default when the event bubbling , that is, when the usecapture equals false execution, So it is safer to set Usecapture to false when handling events, and also to achieve a compatible browser effect.
Event Capture phase: Events are looked up from the top level of the label until the event target is captured.
Event bubbling stage: The event starts with the event target and bubbles up to the top level of the page label.
// bubbling
JS event bubbling and event capture
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
