addEventListener 의 용법 예시 소개

(주의해 야 할 것 은 div 를 js 앞 에 놓 아야 한 다 는 것 이다)
일반적인 상황 에서 dom 대상 에 게 같은 사건 을 연결 하면 마지막 하나만 유효 합 니 다. 예 를 들 어:

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

그러면 method 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); 
  
 
 

실행 순 서 는 method 1 - > method 2 - > method 3 입 니 다.
ie 시리즈 라면 attachEvent 로 여러 사건 을 순서대로 실현 할 수 있 습 니 다. 예 를 들 어:

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

실행 순 서 는 method 3 - > method 2 - > method 1 입 니 다.
=======================================================
Mozilla 중:
addEventListener 의 사용 방식
target.addEventListener(type,listener,useCapture);
target: 문서 노드, document, window 또는 XML HttpRequest.
type: 문자열, 이벤트 이름, "on" 을 포함 하지 않 습 니 다. 예 를 들 어 "click", "mouseover", "keydown" 등 입 니 다.
listener: EventListener 인터페이스 나 JavaScript 의 함 수 를 실현 합 니 다.
useCapture: 캡 처 를 사용 할 지 여부 입 니 다. 보통 false 를 사용 합 니 다.예 를 들 어 document. getElement ById ("testText"). addEventListener ("keydown", function (event) {alert (event. keyCode);}, false);
IE 중:
target.attachEvent(type, listener);
target: 문서 노드, document, window 또는 XML HttpRequest.
type: 문자열, 이벤트 이름, "on" 을 포함 합 니 다. 예 를 들 어 "onclick", "onmouseover", "onkeydown" 등 입 니 다.
listener: EventListener 인터페이스 나 JavaScript 의 함 수 를 실현 합 니 다.예 를 들 어 document. getElement ById ("txt"). attachEvent ("onclick", function (event) {alert (event. keyCode);});
W3C 와 IE 는 지정 한 이 벤트 를 제거 하 는 것 을 지원 합 니 다. 그 용 도 는 설 정 된 이 벤트 를 제거 하 는 것 입 니 다. 형식 은 다음 과 같 습 니 다.
removeEventListener(event,function,capture/bubble);
Windows IE 의 형식 은 다음 과 같 습 니 다.
detachEvent(event,function);
DOM 2 의 진화:
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
새로운 DOM 2 용법 은 addEventListener () 라 는 함수 로 관찰 할 수 있 습 니 다.

 
  
addEventListener(event,function,capture/bubble); 
  
 
 

매개 변수 이 벤트 는 위 표 에서 보 듯 이 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) 
  
} 
  
 
 

위의 type: of window. addEventListener! ="undefined" 프로그램 코드 는 사용자 의 브 라 우 저가 AddEventListener 라 는 이벤트 모델 을 지원 하 는 지 판단 할 수 있 으 며 지원 하지 않 으 면 attachEvent 를 사용 합 니 다.
W3C 와 IE 는 지정 한 이 벤트 를 제거 하 는 것 을 지원 합 니 다. 그 용 도 는 설 정 된 이 벤트 를 제거 하 는 것 입 니 다. 형식 은 다음 과 같 습 니 다.
W3C 형식:
removeEventListener(event,function,capture/bubble);
Windows IE 의 형식 은 다음 과 같 습 니 다.
detachEvent(event,function);