Summary of several methods for js dynamic loading events

Some methods to dynamically load javascript events sometimes
We often need to dynamically add events in JS, which involves browser compatibility issues. The following several methods are often used together.

Method 1: setAttribute
Var obj = document. getElementById ("obj ");
Obj. setAttribute ("onclick", "javascript: alert ('test ');");

Here, setAttribute is used to specify the onclick attribute, which is simple and easy to understand,

However, IE does not supportIE does not support the setAttribute function, but does not support setting certain attributes with setAttribute, including object attributes, set attributes, and event attributes, that is to say, setting style, onclick, and onmouseover attributes with setAttribute 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 attachEvent events include on, such as onclick, while addEventListener does not include on, such as click.
By the way, the third parameter of addEventListener (although rarely used)UseCapture-if it is true, useCapture indicates that you want to start the capture. After capturing is started, all events of the specified type are assigned to the registered EventListener before they are assigned to any EventTargets under the tree. The events that are going to bubbling through the tree will not trigger the specified EventListener captured.

Comprehensive Application
Copy codeThe Code is as follows:
If (window. attachEvent)
{
// IE Event code
}
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). However, due to its ease of use, there are many applications.

The following is my solution:
Copy codeThe Code is as follows:
Function show (){
Alert ("Hello, world !!! ");
}

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

The attachEvent method attaches other processing events to an event. (Mozilla series not supported)

The addEventListener method is used in the Mozilla series.

Example:

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

If this is the case, only medhot3 will be executed.

Write as follows:
Var btn1Obj = document. getElementById ("btn1 ");

// Object. attachEvent (event, function );
Btn1Obj. attachEvent ("onclick", method1 );
Btn1Obj. attachEvent ("onclick", method2 );
Btn1Obj. attachEvent ("onclick", method3 );
The execution sequence is method3-> method2-> method1

If the Mozilla series does not support this method, 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 sequence is method1-> method2-> method3

Instance used:

1.
Copy codeThe 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 codeThe Code is as follows:
If (window. addEventListener ){
Window. addEventListener ('load', _ uCO, false );
} Else if (window. attachEvent ){
Window. attachEvent ('onload', _ uCO );
}