jQuery.click () vs onClick

질문 : jQuery.click () 대 onClick

---

거대한 jQuery 응용 프로그램이 있으며 클릭 이벤트에 대해 아래 두 가지 방법을 사용하고 있습니다.

첫 번째 방법

HTML

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

jQuery

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

두 번째 방법

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript function call

function divFunction(){
    //Some code
}

내 응용 프로그램에서 첫 번째 또는 두 번째 방법을 사용합니다. 어느 것이 더 낫습니까? 성능이 더 좋습니까? 그리고 표준?

답변

---

$('#myDiv').click(function(){ 것이 표준 이벤트 등록 모델을 따르기 때문에 더 좋습니다 . (jQuery는 내부적으로 addEventListener 및 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

출처 : https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick