Firefox:addeventlistener () method
Ie:attachevent () method
Adds an event listener to an HTML element, rather than assigning a value directly to an element's event attributes (such as: OnClick, onmouseover).
To add an event listener for an HTML element:
1. Adding event Handlers using Element event properties
2.attachEvent method Add Event handler function
There is a big difference between these two methods of dealing with events! Event properties can only be assigned one method, namely:
Button1.onclick = function () {alert (1);};
Button1.onclick = function () {alert (2);};
The subsequent assignment statement overrides the preceding OnClick property.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD";
<title> JavaScript Event Listener Example </title>
<body>
<button id= "Button1" > Testing </button>
<script type= "Text/javascript";
//<summary>
//Add Event listener
///</summary>
//< param name= "target" > Carrier </param>
//<param name= "type" > Event type </param>
//<param name= " Func "> Event function </param>
function addEventHandler (target, type, func) {
if ( Target.addeventlistener)
target.addeventlistener (Type, Func, false) ;
Else if (target.attachevent)
Target.attachevent ("On" + Type, func);
Else target["on" + type] = func;
}
<summary>
Remove Event Listener
</summary>
<param name= "target" > Carrier </param>
<param name= "Type" > Event type </param>
<param name= "Func" > Event functions </param>
function removeEventHandler (target, type, func) {
if (Target.removeeventlistener)
Target.removeeventlistener (Type, func, false);
else if (target.detachevent)
Target.detachevent ("On" + Type, func);
else delete target["on" + type];
}
var Button1 = document.getElementById ("Button1");
var Button1Click = function () {alert (1);};
addEventHandler (Button1, "click", Button1Click);
addEventHandler (Button1, "click", Function () {alert (2);});
addEventHandler (Button1, "click", Function () {alert (3);});
removeEventHandler (Button1, "click", Function () {alert (2);}); Can't move out
removeEventHandler (Button1, "click", Button1Click); can be removed from
</script>
</body>
Adding event listeners can be parallel.
Especially when teams work together, there is an increased need for event parallelism, such as the mouse event that listens to the document object or the Load event of the Window object.
Using the event properties will cause the event to be overwritten (the second will overwrite the first time).
Add Event Listener: Not only can multiple handler objects be added to the same event, but they will not be overwritten, nor will the function objects added through the property be overwritten.
They will run sequentially, in IE: add first and then run, and first add in ff.
Tested IE (8) shows 3 and 2, and Firefox (3) shows 2 and 3
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>javascript Event Monitoring </title>
<body>
<button id= "Button1" >
Test
</button>
<script type= "Text/javascript" >
function addEventHandler (target, type, func) {
if (Target.addeventlistener)
Target.addeventlistener (Type, func, false);
Else
if (target.attachevent)
Target.attachevent ("On" + Type, func);
Else
Target["on" + type] = func;
}
function removeEventHandler (target, type, func) {
if (Target.removeeventlistener)
Target.removeeventlistener (Type, func, false);
Else
if (target.detachevent)
Target.detachevent ("On" + Type, func);
Else
Delete target["on" + type];
}
var Button1 = document.getElementById ("Button1");
Button1.onclick = function () {
Alert ("AddByAttr1");
}
Button1.onclick = function () {
Alert ("ADDBYATTR2");
}
var Button1Click = function () {
Alert (1);
};
addEventHandler (Button1, "click", Button1Click);
addEventHandler (Button1, "click", Function () {
Alert (2);
});
addEventHandler (Button1, "click", Function () {
Alert (3);
});
removeEventHandler (Button1, "click", Function () {//cannot be removed (reason: This is a new anonymous object, actually removing the anonymous object)
Alert (2);
});
removeEventHandler (Button1, "click", Button1Click);//Can be removed (reason: object reference here, remove Reference object)
</script>
</body>
JS Listener Close Browser event: http://wenku.baidu.com/view/4158f76aaf1ffc4ffe47ac67.html