JavaScript 이벤트 바인딩의 일반적인 방법에 대한 간략한 설명과 장점과 단점 분석

기존 방식

element.onclick = function(e){
 
   // ...
 
 };

1. 기존 제본의 장점

매우 간단하고 안정적이므로 작동이 보장됩니다. for you 다른 브라우저에서도 동일하게 작동합니다

이벤트를 처리할 때 this 키워드는 현재 요소를 참조하므로 매우 유용합니다

2. 기존 바인딩의 단점

기존 방법은 캡처 및 버블링 대신 이벤트 버블링에서만 실행됩니다.

요소는 한 번에 하나의 이벤트 핸들러에만 바인딩될 수 있습니다. 새로 바인딩된 이벤트 핸들러 함수는 기존 이벤트 핸들러 함수를 덮어씁니다.

이벤트 개체 매개변수(e)는 IE가 아닌 브라우저에서만 사용할 수 있습니다.

W3C 메서드

element.addEventListener('click', function(e){
 
   // ...
 
 }, false);

1. W3C 바인딩의 장점

이 방법은 이벤트 처리의 캡처 단계와 버블링 단계를 모두 지원합니다. 이벤트 단계는 addEventListener의 마지막 매개변수 설정인 false(버블) 또는 true(캡처)에 따라 달라집니다.

이벤트 핸들러 내에서 this 키워드는 현재 요소를 나타냅니다.

이벤트 객체는 항상 핸들러 함수의 첫 번째 인수(e)를 통해 캡처될 수 있습니다.

이전에 바인딩된 이벤트를 덮어쓰지 않고 동일한 요소에 원하는 여러 이벤트를 바인딩할 수 있습니다.

2. W3C 바인딩의 단점

IE에서는 지원하지 않으므로 IE를 사용해야 합니다. 대신에 AttachEvent 함수를 사용하세요.

IE 방식

element.attachEvent('onclick', function(){
 
    // ...
 
  });

1. IE 방식의 장점

같은 요소를 같은 요소에 바인딩할 수 있습니다. 요소. 이전에 바인딩된 이벤트를 덮어쓰지 않고 동시에 여러 이벤트를 수행합니다.

2. IE 방식의 단점

IE는 이벤트 캡처의 버블링 단계만 지원합니다.

이벤트 수신 함수의 this 키워드는 window 개체를 가리킵니다. 현재 요소 (IE의 큰 단점)

이벤트 객체는 window.event 매개변수에만 존재합니다

이벤트 이름은 ontype 형식으로 지정해야 합니다. 예를 들어 click 대신 onclick

IE만 가능합니다. IE 이외의 브라우저에서는 W3C의 addEventListener를 사용해야 합니다.

Dean Edwards의 솔루션(addEvent/removeEvent 라이브러리)

1 addEvent

의 장점은 모든 브라우저에서 사용할 수 있습니다. 지원 없이 이전 브라우저에서도 작동합니다.

이 키워드는 모든 바인딩 기능에서 사용할 수 있으며 현재 요소를 가리킵니다.

이를 방지하는 모든 브라우저를 무력화합니다. 기본 동작과 다양한 브라우저별 기능 이벤트 버블링 방지

브라우저 유형에 관계없이 항상 이벤트 객체가 첫 번째 객체로 전달됩니다

2. addEvent의 단점

버블링 단계에서만 작동합니다( 전통적인 이벤트 바인딩 방식을 깊이 사용합니다.)