Javascript의 addEventListener()와 attachmentEvent()_javascript 스킬의 차이점 분석

Mozilla:

addEventListener 사용 방법:

target.addEventListener(type, Listener, useCapture)

target: document node, document, 창 또는 XMLHttpRequest.
유형: 문자열, 이벤트 이름, "on" 제외(예: "click", "mouseover", "keydown" 등)
리스너: EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다.
useCapture: 캡처 사용 여부, 일반적으로 false입니다. 예: document.getElementById("testText").addEventListener("keydown", function (event) { Alert(event.keyCode); }, false)

IE:

target.attachEvent(유형, 리스너)
대상: 문서 노드, 문서, 창 또는 XMLHttpRequest.
유형: "onclick", "onmouseover", "onkeydown" 등과 같은 "on"을 포함한 문자열, 이벤트 이름
리스너: EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다. 예: document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C와 IE는 모두 지정된 이벤트 제거를 지원합니다. 설정을 제거하는 이벤트입니다.

W3C 형식:

removeEventListener(event, function, Capture/bubble)

Windows IE의 형식은 다음과 같습니다.

detachEvent(event, function);


target.addEventListener(type, Listener, useCapture)
대상 문서 노드, 문서, 창 또는 XMLHttpRequest.
"click", "mouseover", "keydown" 등과 같은 "on"을 제외하고 문자열, 이벤트 이름을 입력합니다.
리스너는 EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다.
useCapture 캡처를 사용할지 여부는 나중에 이벤트 흐름 섹션을 읽은 후에 이해하게 됩니다. 일반적으로 false를 사용하십시오.
이벤트가 트리거되면 다음과 같은 이벤트 객체가 이벤트 핸들러로 전달됩니다.
document.getElementById ("testText").addEventListener("keydown", function (event) { Alert(event.keyCode); }, false)
적용되는 브라우저 버전이 다르므로 사용 시 주의하시기 바랍니다
attachmentEvent 메소드 버튼 onclick
addEventListener 메소드 버튼 클릭은 IE에서 사용됩니다.
fox에서 사용합니다. 둘 다 사용하는 원리: 실행 우선순위가 다를 수 있습니다. 다음 예는 다음과 같습니다.
attachEvent 메소드, for. 특정 이벤트 다른 처리 이벤트를 첨부합니다. (Mozilla 시리즈는 지원하지 않습니다.)
Mozilla 시리즈에서는 addEventListener 메소드를 사용합니다
예: document.getElementById("btn").onclick = method1
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3; 이렇게 작성하면 medhot3만 실행됩니다.
다음과 같이 작성합니다.
var btn1Obj = document.getElementById("btn1") ; //객체 .attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2); ,method3); 실행 순서는 method3->method2->method1
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
예: (div는 js 앞에 위치해야 한다는 점에 유의하세요)

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

;

클릭

>

从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

DOM1 协定:

Event Name	Description
onblur()	The element has lost focus (that is, it is not selected by the user).
onchange0	The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick0	The mouse has been clicked on an element.
ondblclick()	The mouse has been double-clicked on an element.
onfocus()	The element has gotten focus.
onkeydown()	A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress()	A keyboard key has been pressed while the element has focus.
onkeyup()	A keyboard key has been released while the element has focus.
onload()	The element has loaded (document, frameset, or image).
onmousedown()	A mouse button has been pressed.
onmousemove()	The mouse has been moved.
onmouseout()	The mouse has been moved off of or away from an element.
onmouseover()	The mouse has moved over an element.
onmouseup()	A mouse button has been released.
onreset()	The form element has been reset, such as when a form reset button is pressed.
onresize()	The window's size has been changed.
onselect()	The text of a form element has been selected.
onsubmit()	The form has been submitted.
onunload()	The document or frameset has been unloaded.

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(이벤트,함수,캡처/버블);

매개변수 이벤트는 위 표와 같습니다. Function은 실행되는 함수입니다. Capture와 Bubble은 W3C에서 공식화한 두 가지 시간 모드입니다. 간단히 말해서 캡처는 문서의 시작 부분부터 읽어들이는 것입니다. 그런 다음 이벤트를 실행하고, 버블은 지정된 위치를 먼저 검색한 다음 이벤트를 실행합니다.
캡처/버블의 매개변수는 부울 값이고, True는 캡처를 의미하고, False는 버블을 의미합니다. 이는 attachmentEvent()이며 형식은 다음과 같습니다.

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

특별한 점은 Windows IE 환경에서 버블 모드가 사용되기 때문에 attachmentEvent가 캡처/버블 매개변수를 지정할 필요가 없다는 것입니다. 다음은 이벤트 사용법을 보여주는 이미지 롤오버 예시입니다.

“http://www.w3.org/TR/html4/strict.dtd ">

alt=”Home”>

alt=”정보”>

alt =”블로그”>

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

W3C와 IE는 모두 지정된 이벤트 제거를 지원합니다. 목적은 설정된 이벤트를 제거하는 것입니다.

W3C 형식:

removeEventListener(이벤트,함수,캡처/버블);

Windows IE의 형식은 다음과 같습니다.

detachEvent(이벤트,함수);

데이터 참조: 14장 - 브라우저와 JavaScript, JavaScript 단계별, 저자: Steve Suehring