둘 다 정확하지만 그중 어느 것도 그 자체로는 “최상의”것은 아니며 개발자가 두 가지 방법을 모두 사용하기로 선택한 이유가있을 수 있습니다.

이벤트 리스너 (addEventListener 및 IE의 attachEvent)

이전 버전의 Internet Explorer는 거의 모든 브라우저와 다르게 자바 스크립트를 구현합니다. 9 미만의 버전 에서는 다음과 같이 attachEvent[ doc ] 메소드 를 사용합니다 .

element.attachEvent('onclick', function() { /* do stuff here*/ });

대부분의 다른 브라우저 (IE 9 이상 포함)에서는 다음과 같이 addEventListener[ doc ] 를 사용 합니다.

element.addEventListener('click', function() { /* do stuff here*/ }, false);

이 접근 방식 ( DOM 레벨 2 이벤트 )을 사용하면 이론적으로 무제한의 이벤트를 단일 요소에 첨부 할 수 있습니다. 실질적인 제한 사항은 클라이언트 측 메모리 및 기타 성능 문제로, 각 브라우저마다 다릅니다.

위의 예제는 익명 함수 [ doc ]를 사용하는 것을 나타냅니다 . 함수 참조 [ doc ] 또는 클로저 [ doc ]를 사용하여 이벤트 리스너를 추가 할 수도 있습니다 .

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

또 다른 중요한 특징은 addEventListener최종 매개 변수인데,이 매개 변수는 리스너가 버블 링 이벤트에 반응하는 방식을 제어합니다 [ doc ]. 예제에서 거짓을 전달했습니다.이 사례는 아마도 95 %의 유스 케이스에 대한 표준입니다. attachEvent인라인 이벤트를 사용할 때 또는에 해당하는 인수가 없습니다 .

인라인 이벤트 (HTML onclick = “”속성 및 element.onclick)

자바 스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를 인라인으로 배치 할 수 있습니다. 아마 이것을 보았을 것입니다 :

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

대부분의 숙련 된 개발자는이 방법을 피하지만 작업을 완료합니다. 간단하고 직접적입니다. 여기서 처리기 자체는 일종의 익명 함수이지만 클로저 또는 익명 함수를 사용할 수 없으며 범위 제어가 제한됩니다.

다른 방법은 다음과 같습니다.

element.onclick = function () { /*do stuff here */ };

… 범위를 더 많이 제어하고 (HTML 대신 스크립트를 작성하기 때문에) 익명 함수, 함수 참조 및 / 또는 클로저를 사용할 수 있다는 점을 제외하고는 인라인 자바 스크립트와 같습니다.

인라인 이벤트의 중요한 단점은 위에서 설명한 이벤트 리스너와 달리 하나의 인라인 이벤트 만 할당 할 수 있다는 것입니다. 인라인 이벤트는 요소 [ doc ] 의 속성 / 속성으로 저장되므로 덮어 쓸 수 있습니다.

<a>위의 HTML 예제 를 사용하여 :

var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };

… 요소를 클릭하면 “Did stuff # 2” 만 표시 됩니다 . 첫 번째로 할당 된 onclick속성을 두 번째 값으로 덮어 쓰고 원래 인라인 HTML onclick속성도 덮어 썼습니다 . http://jsfiddle.net/jpgah/ 에서 확인하십시오 .

대체로 인라인 이벤트를 사용하지 마십시오 . 특정 사용 사례가있을 수 있지만 100 % 확실하지 않은 경우 인라인 이벤트를 사용하지 않아야합니다.

현대 자바 스크립트 (Angular 등)

이 답변이 처음 게시되었으므로 Angular와 같은 자바 스크립트 프레임 워크가 훨씬 더 대중화되었습니다. Angular 템플릿에 다음과 같은 코드가 표시됩니다.

<button (click)="doSomething()">Do Something</button>

인라인 이벤트처럼 보이지만 그렇지 않습니다. 이 유형의 템플릿은 뒤에서 이벤트 리스너를 사용하는보다 복잡한 코드로 변환됩니다. 여기에 이벤트에 대해 쓴 모든 내용이 여전히 적용되지만 최소한 하나의 계층으로 인해 핵심에서 제거됩니다. 너트와 볼트를 이해해야하지만 최신 JS 프레임 워크 모범 사례에 이러한 종류의 코드를 템플릿으로 작성하는 경우 인라인 이벤트를 사용하고 있다고 생각하지 마십시오.

어느 것이 최고입니까?

문제는 브라우저 호환성과 필요성의 문제입니다. 요소에 둘 이상의 이벤트를 첨부해야합니까? 미래에 당신은? 확률은 당신입니다. attachEvent 및 addEventListener가 필요합니다. 그렇지 않은 경우 인라인 이벤트는 트릭을 수행하는 것처럼 보일지 모르지만 미래에 대비하는 것이 훨씬 나을 것 같지만 최소한 예상 할 수는 없습니다. JS 기반 이벤트 리스너로 이동해야 할 수도 있으므로 시작하십시오. 인라인 이벤트를 사용하지 마십시오.

jQuery 및 기타 자바 스크립트 프레임 워크는 일반 모델에서 DOM 레벨 2 이벤트의 다양한 브라우저 구현을 캡슐화하므로 반역자로서 IE의 역사에 대해 걱정할 필요없이 브라우저 간 호환 코드를 작성할 수 있습니다. jQuery와 동일한 코드, 모든 크로스 브라우저 및 준비가 완료되었습니다.

$(element).on('click', function () { /* do stuff */ });

그러나이 한 가지에 대해서만 프레임 워크를 사용하지 마십시오. 이전 브라우저를 관리하기 위해 작은 유틸리티를 쉽게 굴릴 수 있습니다.

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

사용해보십시오 : http://jsfiddle.net/bmArj/

보고있는 스크립트가 브라우저의 차이점을 다른 방식으로 고려하지 않는 한 (질문에 표시되지 않은 코드로) 사용 addEventListener하지 않는 부분 은 9 미만의 IE 버전에서는 작동하지 않습니다.

문서 및 관련 자료

• W3 HTML 사양, 요소 이벤트 핸들러 속성
• MDN의 element.addEventListener
• MSDN의 element.attachEvent
• jquery.on
• quirksmode 블로그 “이벤트 소개”
• Google의 CDN 호스팅 자바 스크립트 라이브러리

답변

var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;

h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);

const element = document.querySelector('a');
element.addEventListener('click', event => event.preventDefault(), true);

<a href="//google.com">Try clicking this link.</a>

const element = document.querySelector('a');
element.onclick = event => event.preventDefault();

<a href="//google.com">Try clicking this link.</a>

<a href="//google.com" onclick="event.preventDefault();">Try clicking this link.</a>