Summary of several methods of dynamically loading events in js_javascript skills

Sometimes we need to dynamically load some methods of javascript events
Often we need to dynamically add events in JS, which involves browser compatibility issues. We often use a mixture of the methods mentioned below. .

Method 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert( 'Test');");

Here we use setAttribute to specify the onclick attribute, which is simple and easy to understand.

However: IE does not support . It is not that IE does not support the setAttribute function, but it does not support using setAttribute to set certain attributes, including object attributes, collection attributes, and event attributes. In other words, use setAttribute Setting the style, onclick, and onmouseover attributes does not work in IE.

Method 2, use attachEvent and addEventListener
IE supports 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 has on, such as onclick, while the addEventListener does not have on, such as click.
By the way the third argument to addEventListener (although rarely used) useCapture - if true, useCapture indicates that the user wishes to initiate capture. When capturing is initiated, all events of the specified type will be dispatched to the registered EventListener before being dispatched to any EventTargets below it in the tree. Events that are bubbling up the tree will not fire the EventListener specified using capture.

Comprehensive application

Copy code The code is as follows:

if (window.attachEvent)
{
//Event code of IE
}
else
{
//Event code of other browsers
}

Method 3, event = function

Example: obj.onclick = Foo;
This is supported in multiple browsers. This is an old specification (Method 2 belongs to the DOM2 specification), but due to ease of use, There are also many occasions for use.

Here is my solution:

Copy the codeThe code is as follows:

function show(){
alert("Hello, world!!!");
}

obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');

attachEvent method, for a certain One event has other processing events attached to it. (Mozilla series not supported)

addEventListener method for Mozilla series

Example:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

If written like this, only medhot3 will be executed

is 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 execution order is method3->method2->method1

If it is a Mozilla series, this method is not supported and 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 order is method1->method2->method3

Usage examples:

1.

Copy code The code is as follows:

var el = EDITFORM_DOCUMENT.body;
//Get the object first, EDITFORM_DOCUMENT is actually an iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}

2.

Copy code The code is as follows:

if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}