Sometimes it is necessary 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 several methods discussed below.
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 support it . 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 to set style, onclick, and onmouseover. It doesn't work in IE.
Method 2, use attachEvent and addEventListener
IE supports attachEvent
obj.attachEvent("onclick", Foo);
functionFoo()
{
alert("Test");
}
Can also be written together
obj.attachEvent("onclick", function(){alert("test");});
Other browsers support addEventListener
obj.addEventListener("click", Foo, false);
functionFoo()
{
alert("Test");
}
It can also be written together
obj.addEventListener("click", function(){alert("Test");}, false);
Note that the attachEvent event has on, such as onclick, but the addEventListener does not have on, such as click.
By the way, the third parameter of 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 the capture.
Comprehensive application
Copy the code code as follows:
if (window.attachEvent)
{
//IE event code
}
else
{
//Event codes for other browsers
}
Method three, event = function
Example: obj.onclick = Foo;
This is supported in multiple browsers. It belongs to the old specification (Method 2 belongs to the DOM2 specification), but because it is easy to use, it is used in many situations.
Here's my solution:
Copy the code code 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)
addEventListener method is used in Mozilla series
Example:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
If written like this, then only medhot3 will be executed
Write it 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 the code code 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 the code code as follows:
if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}