> 웹 프론트엔드 > JS 튜토리얼 > Javascript의 addEventListener()와 attachmentEvent()_javascript 스킬의 차이점 분석

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

WBOY
풀어 주다: 2016-05-16 18:52:32
원래의
1486명이 탐색했습니다.
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 =”블로그”>


”Braingia

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

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

W3C 형식:

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

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

detachEvent(이벤트,함수);

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿