[javascript] jQuery.click () vs onClick

표준 이벤트 등록 모델에 따라 사용하는 $('#myDiv').click(function(){것이 좋습니다 . (jQuery는 내부적으로addEventListener and를 사용합니다 attachEvent).

기본적으로 현대적인 방식으로 이벤트를 등록하는 것이 방해없이 이벤트를 처리하는 방법입니다. 또한 대상에 대해 둘 이상의 이벤트 리스너를 등록 addEventListener()하기 위해 동일한 대상을 호출 할 수 있습니다 .

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

addEventListener를 사용하는 이유는 무엇입니까? (MDN에서)

addEventListener는 W3C DOM에 지정된대로 이벤트 리스너를 등록하는 방법입니다. 장점은 다음과 같습니다.

• 이벤트에 대해 둘 이상의 핸들러를 추가 할 수 있습니다. 이것은 다른 라이브러리 / 확장 프로그램을 사용하더라도 제대로 작동해야하는 DHTML 라이브러리 또는 Mozilla 확장에 특히 유용합니다.
• 리스너가 활성화 될 때 단계를보다 세밀하게 제어 할 수 있습니다 (캡처 및 버블 링).
• HTML 요소뿐만 아니라 모든 DOM 요소에서 작동합니다.

최신 이벤트 등록에 대한 추가 정보-> http://www.quirksmode.org/js/events_advanced.html

HTML 속성 설정과 같은 다른 방법 , 예 :

<button onclick="alert('Hello world!')">

또는 DOM 요소 속성 , 예 :

myEl.onclick = function(event){alert('Hello world');}; 

오래되어 쉽게 덮어 쓸 수 있습니다.

HTML 속성 은 마크 업을 더 크고 읽기 어렵게하기 때문에 피해야합니다. 내용 / 구조 및 동작에 대한 우려는 잘 구분되지 않으므로 버그를 찾기가 어렵습니다.

DOM 요소 특성 메소드 의 문제점 은 이벤트 당 하나의 이벤트 핸들러 만 요소에 바인드 할 수 있다는 것입니다.

전통적인 이벤트 처리에 대한 자세한 내용-> http://www.quirksmode.org/js/events_tradmod.html

MDN 참조 : https://developer.mozilla.org/en-US/docs/DOM/event

답변

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

 $('#myDiv').click(function(){
      //Some code
 });