빠른 시작 원생 js 이벤트

1. 전통적인 이벤트 귀속 방법

우리가 공부할 때 처음에 접촉한 이벤트 귀속 방식은 대부분 전통적인 이벤트 귀속 방법이다.기존 이벤트 바인딩 방법 사례는 다음과 같습니다.

window.οnlοad=function(){
    alert(" ");
}
document.getElementById("btn").οnclick=function(){
    alert(" ");
}
document.οnmοusemοve=function(){
    console.log(" ");
}
1
2
3
4
5
6
7
8
9

기존 이벤트 바인딩 방법의 특징은 다음과 같습니다.
이벤트 이름 사이에는 반드시 온을 추가해야 합니다. 예를 들어:onclick,onload,onmousemove입니다.
낮은 버전의 IE를 포함한 메인스트림 브라우저 호환
같은 요소가 여러 이벤트를 연결할 때 마지막 이벤트만 추가되고 전파 모드는 거품 모드일 수 있습니다.

2. addEventListener()

방법 사례:

window.addEventListener('load',init,false);
function init(){
    alert(" ");
}
//  
window.addEventListener('load',function(){
    alert(" ");
},false);
1
2
3
4
5
6
7
8

브라우저 호환성: Internet Explorer 8 및 이전 IE 버전은addEventListener () 방법을 지원하지 않으며, Opera 7.0 및 Opera 이전 버전도 지원하지 않습니다.
addEventListener() 메소드 특징:
element.addEventListener(event,function,useCapture)의 세 번째 매개 변수는 지정한 이벤트가 포획이나 거품 단계에서 실행되는지 여부를 제어할 수 있습니다.true - 이벤트 핸들이 캡처 단계에서 실행됩니다.false- 기본값 - 이벤트 핸들이 거품이 생기는 단계에서 실행됩니다.
addEventListener()는 동일한 요소에 여러 이벤트를 바인딩할 수 있으며 덮어쓰지 않습니다.같은 요소에 여러 이벤트를 연결시키면 먼저 연결을 하고 실행하는 규칙을 사용합니다.
addEventListener()는 이벤트를 바인딩할 때 이벤트 이름 이전에 on을 사용할 필요가 없습니다.
이 방법의 호환성을 주의하십시오. IE6-8을 호환하려면 이 방법을 사용할 수 없습니다. 다음 방법을 사용할 수 있습니다.
removeEventListener () 를 사용하여 이전에 바인딩된 이벤트를 제거할 수 있습니다.
//방향
요소 추가 이벤트 핸들

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

//   
  
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
1
2
3
4
5
 
  
3. attachEvent()
 
  
 ：
 
  
window.attachEvent('onload',function(){
    alert(" ");
});
1
2
3
  
attachEvent() 메소드 특징:
attachEvent는 IE의 방법으로 W3C 표준을 따르지 않고 다른 주류 브라우저인 FF 등 W3C 표준을 따르는 브라우저는addEventListener를 사용하기 때문에 실제 개발에서 분리 처리해야 한다.
attachEvent()는 후면 바인딩이 먼저 실행됩니다.
바인딩 시간, attach Event는 onclick, onmouseover 등 on을 가지고 있어야 합니다