addEventListener_javascript 스킬 사용 예시

(要注意的是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

addEventListener() 함수를 사용하여 새로운 DOM2 사용법을 관찰할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

addEventListener(event, function, Capture/bubble)

이벤트 매개변수는 위 표와 같으며, function은 실행되는 함수이며, 캡처와 버블은 각각 ​​W3C에서 규정한 두 가지 시간 모드가 있습니다. 간단히 말하면 캡처는 문서 시작 부분부터 마지막 ​​줄을 읽어 이벤트를 실행하는 반면, 버블은 지정된 위치를 먼저 검색한 후 이벤트를 실행합니다.
캡처/버블의 매개변수는 부울 값이며 True는 캡처 사용을 의미하고 False는 버블을 의미합니다. Windows Internet Explorer에도 AttachEvent()인 EventHandler가 있습니다.

코드 복사 코드는 다음과 같습니다.

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

특수한 점은 Windows IE 환경에서는 Bubble 모드를 사용하기 때문에 attachmentEvent에 캡처/버블 매개변수를 지정할 필요가 없다는 것입니다.

어떤 유형의 모니터링인지 확인하는 방법입니다. 지원되나요? 예:

코드 복사 코드는 다음과 같습니다.

if (window.addEventListener 유형 != “정의되지 않음") {
window.addEventListener("load",rollover,false);
} else {
window.attachEvent("onload",rollover)
}

위의 window.addEventListener != "정의되지 않은" 프로그램 코드는 사용자의 브라우저가 AddEventListener 이벤트 모델을 지원하는지 여부를 확인할 수 있습니다. 그렇지 않은 경우

W3C 및 IE도 지정된 제거를 지원합니다. 이벤트는 설정된 이벤트를 제거하는 데 사용됩니다.

W3C 형식:

removeEventListener(event, function, Capture/bubble)

Windows IE 형식

detachEvent(event,function);