Usage examples of addEventListener_javascript skills

(要注意的是div必须放到js前面才行)

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

复制代码 代码如下:

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

那么将只有method3生效。

如果是Mozilla系列，用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);

执行顺序为method1->method2->method3

如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

=======================================================

Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的进化:

DOM 0 Event	DOM 2 Event
onblur()	blur
onfocus()	focus
onchange()	change
onmouseover()	mouseover
onmouseout()	mouseout
onmousemove()	mousemove
onmousedown()	mousedown
onmouseup()	mouseup
onclick()	click
ondblclick()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
onsubmit()	submit
onload()	load
onunload()	unload

The new DOM2 usage can be observed with the addEventListener() function:

Copy code The code is as follows:

addEventListener(event, function, capture/bubble);

The parameters event are as shown in the table above, function is the function to be executed, capture and bubble are respectively formulated by W3C There are two time modes. To put it simply, capture reads the last line from the beginning of the document and then executes the event, while bubble first searches for the specified location and then executes the event.
The parameters of capture/bubble are Boolean values, and True means Use capture, False means bubble. Windows Internet Explorer also has an EventHandler, which is attachEvent(). The format is as follows:

Copy code The code is as follows:

window.attachEvent("submit",myFunction());

What is special is that attachEvent does not need to specify the capture/bubble parameters, because In the Windows IE environment, Bubble mode is used.

How to determine whether which type of monitoring is supported? For example:

Copy code The code is as follows:

if (typeof window.addEventListener != “undefined ") {
window.addEventListener("load",rollover,false);
} else {
window.attachEvent("onload",rollover)
}

The above typeof window.addEventListener != “undefined” program code can determine whether the user’s browser supports the AddEventListener event model. If not, use attachEvent.

W3C and IE also support removing the specified Events are used to remove set events. The formats are as follows:

W3C format:

removeEventListener(event, function, capture/bubble);

Windows IE The format is as follows:

detachEvent(event,function);