JavaScript Tutorials method of dynamically loading events

  This article is mainly on the JS dynamic loading of several methods of a detailed summary of the introduction, the need for friends can come to the reference, I hope to help you.

Some of the ways that you need to dynamically load JavaScript events are often we need to dynamically add events in JS, which involves browser compatibility issues, and we often mix them with the following methods.   Method One, setattribute var obj = document.getElementById ("obj"); Obj.setattribute ("onclick", "Javascript:alert (' Test ');");   Here use SetAttribute to specify onclick properties, simple, well understood,   but: IE does not support, IE does not support setattribute this function, but does not support the use of setattribute set some properties, including Object Properties, collection properties, event properties, that is, using setattribute to set style, OnClick, onmouseover These properties are not feasible in IE.   Method II, with Attachevent and AddEventListener IE support attachevent   obj.attachevent ("onclick", Foo); function Foo () {     alert ("Test");}   can also be written together obj.attachevent ("onclick", function () {alert ("Test");}); Other browsers support AddEventListener   Obj.addeventlistener ("Click", Foo, false); function Foo () {     alert ("Test");}   can also be written together Obj.addeventlistener ("click", Function () {alert ("test") ;}, False);   Note that the Attachevent event takes on, such as OnClick, and AddEventListener does not take on, such as Click. By the way, AddEventListener's third argument, though rarely used, usecapture-if true, usecapture indicates that the user wants to start the capture. After the capture is started,All events of the specified type are assigned to the registered EventListener prior to any eventtargets that is assigned to the tree below it. Events that are bubbling through the tree will not trigger the specified use capture EventListener.   Comprehensive application code is as follows: if (window.attachevent) {     //ie event code} else {     //other browser event code} &NB Sp Method III, event = function   Example: Obj.onclick = Foo; This is supported in multiple browsers, which belong to the old specification (method II belongs to the DOM2 specification), but because of easy to use, the occasion is also more.   Below is my workaround: The   code is as follows: Function show () {       alert ("Hello, World!!!");}   Obj.setattrib Ute (' onclick ', document.all eval (function () {Show ()}): ' Javascript:show () ');     Attachevent method to attach additional handling events for an event. (Mozilla series not supported)   AddEventListener method for Mozilla series   examples:    document.getElementById ("btn"). onclick = method1; document.getElementById ("btn"). onclick = Method2; document.getElementById ("btn"). onclick = method3;   If so, then only MEDHOT3 will be executed   written like this: var btn1obj = document.getElementById ("btn1");   // Object.attachevent (event,function); Btn1obj.attachevent ("onclick", method1); Btn1obj.attacheveNT ("onclick", method2); Btn1obj.attachevent ("onclick", method3); The order of execution is method3->method2->method1   If the Mozilla series is not supported, the method needs to be used 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);   Execution order for method1->method2->method3   usages:   1.     Code as follows: var el = editform_document.body; ///First Get object, Editform_document is an iframe if (El.addeventlistener) { el.addeventlistener (' click ', Kinddisablemenu, false);} else if (el.attachevent) { el.attachevent (' onclick ', kinddisablemenu);}   2. The   code is as follows: if (Window.addeventlistener) { window.addeventlistener (' load ', _uco, false);} else if (Window.attache Vent) { window.attachevent (' onload ', _uco);}