JavaScript에서 addEventListener 사용에 대한 자세한 설명

addEventListener는 이벤트 처리프로그램을 등록하는 데 사용됩니다. IE에서는 AttachEvent 대신 addEventListener에 대해 이야기하는 이유는 무엇입니까? 첫째로, attachmentEvent는 상대적으로 간단하고, 둘째, addEventListener는 DOM의 표준 콘텐츠입니다. 오늘은 JavaScript에서의 addEventListener 사용법에 대해 자세히 소개해드리겠습니다!

(p는 반드시 js 앞에 위치해야 한다는 점에 유의하세요)

일반적으로 동일한 이벤트를 dom 객체에 바인딩하면 마지막 이벤트만 적용됩니다. 예를 들면 다음과 같습니다.

코드는 다음과 같습니다.

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

그러면 방법 3만 적용됩니다.
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 시리즈에서는 attachmentEvent를 사용합니다. 여러 이벤트를 순서대로 구현할 수 있습니다. 예:

코드는 다음과 같습니다.

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

실행 순서는 method3->method2->method1
======= ========= =======================================
In Mozilla:
addEventListener 사용 방법

target.addEventListener(type,listener,useCapture);

target: 문서 노드, 문서, 창 또는 XMLHttpRequest.
type: 문자열, 이벤트 이름, "click", "mouseover", "keydown" 등과 같은 "on" 제외
listener: EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다.
useCapture: 캡처 사용 여부, 일반적으로 false입니다. 예:

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

In IE:

target.attachEvent(type, listener);

target: 문서 노드, 문서, 창 또는 XMLHttpRequest.
type: "onclick", "onmouseover", "onkeydown" 등과 같은 "on"을 포함한 문자열, 이벤트 이름
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
onmo useout()	mouseout
onmousemove()	mousemove
onmousedown()	mousedown
onmouseup()	mouseup
onclick()	click
ondblclick ()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
on submit()	submit
onload ()	로드
onunload()	unload

新的DOM2 用法可以addEventListener()这个函数来观察到:

代码如下:

addEventListener(event,function,capture/bubble);

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

代码如下:

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

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.
如何判断是否支持哪种监听呢？如：

代码如下:

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

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

总结：

本文通过实例详细介绍了关于JavaScript中addEventListener的使用，相信小伙伴对此也是能够有一定的了解，希望对你的工作有所帮助！

相关推荐：

javascript DOM对象学习之事件流addEventListener()使用教程

关于addEventListener问题

详解addEventListener的三个参数之useCapture

위 내용은 JavaScript에서 addEventListener 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!