jQuery.click () vs onClick

거대한 jQuery 애플리케이션이 있으며 클릭 이벤트에 대해 아래 두 가지 방법을 사용하고 있습니다.

첫 번째 방법

HTML

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

jQuery

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

두 번째 방법

HTML

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

자바 스크립트 함수 호출

function divFunction(){
    //Some code
}

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

표준 이벤트 등록 모델에 따라 사용하는 $('#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

성능을 향상 시키려면 기본 JavaScript를 사용하십시오. 더 빠른 개발을 위해서는 jQuery를 사용하십시오. jQuery와 Native Element Performance의 성능 비교를 확인하십시오 .

Windows Server 2008 R2 / 7 64 비트의 Firefox 16.0 32 비트에서 테스트를 수행했습니다.

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

클릭 이벤트의 경우 기본 브라우저 이벤트 vs jquery 트리거 또는 jQuery vs 기본 클릭 이벤트 바인딩을 확인하십시오 .

Windows Server 2008 R2 / 7 64 비트에서 Chrome 22.0.1229.79 32 비트에서 테스트

$('#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

내가 이해 한 바에 따르면, 귀하의 질문은 실제로 jQuery를 사용할지 여부에 관한 것이 아닙니다. 오히려 : HTML이나 이벤트 리스너를 통해 이벤트를 인라인으로 바인딩하는 것이 더 낫습니까?

인라인 바인딩은 더 이상 사용되지 않습니다. 또한이 방법으로 하나의 함수 만 특정 이벤트에 바인딩 할 수 있습니다.

따라서 이벤트 리스너를 사용하는 것이 좋습니다. 이런 식으로 많은 함수를 단일 이벤트에 바인딩하고 필요한 경우 나중에 바인딩 해제 할 수 있습니다. 이 순수한 JavaScript 코드를 고려하십시오.

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

이것은 대부분의 최신 브라우저에서 작동합니다.

그러나 프로젝트에 jQuery를 이미 포함시킨 경우 jQuery : .on또는 .click함수 만 사용하십시오 .

jQuery를 사용하여 함수를 클릭에 바인딩 할 수 있습니다.

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

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

function divFunction(){
 //some code
}

$('#myDiv').clickJavaScript 코드를 HTML 과 분리하기 때문에 더 좋습니다 . 페이지 비헤이비어와 구조를 다르게 유지해야합니다 . 이것은 많은 도움이됩니다.

표준과 성능을 모두 제공하므로이를 수행하십시오.

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

두 번째 방법은 간단한 JavaScript 코드이며 jQuery보다 빠릅니다. 그러나 여기서 성능은 거의 같습니다.

IMHO, onclick은 다음 조건이 충족되는 경우에만 .click보다 선호되는 방법입니다.

• 페이지에 많은 요소가 있습니다
• 클릭 이벤트에 등록 할 이벤트는 하나뿐입니다
• 모바일 성능 / 배터리 수명이 걱정됩니다

모바일 장치의 JavaScript 엔진이 같은 세대의 데스크톱보다 4 ~ 7 배 느리기 때문에이 의견을 형성했습니다. jQuery가 사용자 경험과 배터리 수명을 희생하면서 모든 이벤트를 바인딩하기 때문에 모바일 장치의 사이트를 방문하고 불안한 스크롤을 수신하면 싫어요. 최근의 또 다른 지원 요소는 정부 기관에만 문제가되지만;), JavaScript 프로세스가 오래 걸리거나 프로세스를 기다리는 중이라는 메시지 상자가 표시된 IE7 팝업이 있습니다. 이것은 jQuery를 통해 바인딩 할 요소가 많을 때마다 발생했습니다.

작품의 차이. click ()을 사용하면 여러 함수를 추가 할 수 있지만 속성을 사용하면 마지막 함수 중 하나만 실행됩니다.

데모

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

자바 스크립트

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

성능에 대해 이야기하는 경우 직접 사용하는 것이 항상 빠르지 만 속성을 사용하면 하나의 기능 만 할당 할 수 있습니다.

우려 사항 분리가 핵심이므로 이벤트 바인딩이 일반적으로 허용되는 방법입니다. 이것이 기본적으로 많은 기존 답변이 말한 것입니다.

그러나 선언적 마크 업 아이디어를 너무 빨리 버리지 마십시오. 장소가 있으며 Angularjs와 같은 프레임 워크가 중심입니다.

<div id="myDiv" onClick="divFunction()">Some Content</div>일부 개발자가 남용했기 때문에 전체 가 너무 부끄럽다는 것을 이해해야합니다 . 그래서 그것은 같은 희생의 비율에 도달했습니다 tables. 일부 개발자는 실제로tables 테이블 형식 데이터를 피 합니다. 이해하지 않고 행동하는 사람들의 완벽한 예입니다.

나는 내 행동을 내 견해와 분리시키는 아이디어를 좋아하지만. 나는 마크 업 선언으로 어떤 문제를 볼 것 (그것이하지 않습니다 방법 하는가가 아니라 행동). 부트 스트랩 자바 스크립트 구성 요소와 매우 유사한 실제 onClick 속성 또는 사용자 정의 속성의 형태 일 수 있습니다.

이 방법으로 마크 업만으로이 기능을 사용하면 조회 자바 스크립트 이벤트 바인더를 반대로 바꾸는 대신에 수행 할 작업을 확인할 수 있습니다.

따라서 위의 세 번째 대안으로 데이터 속성을 사용하여 마크 업 내의 동작을 설명 적으로 알 수 있습니다. 행동은 시야에서 벗어나지 만 한 눈에 무슨 일이 일어나고 있는지 볼 수 있습니다.

부트 스트랩 예 :

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

출처 : http://getbootstrap.com/javascript/#popovers

참고 두 번째 예의 주요 단점은 글로벌 네임 스페이스의 오염입니다. 이것은 위의 세 번째 대안을 사용하거나 Angular와 같은 프레임 워크 및 자동 범위가있는 ng-click 속성을 사용하여 우회 할 수 있습니다.

둘 다 다른 목적으로 사용될 수 있다는 점에서 더 나을 것은 없습니다 . onClick(실제로해야합니다 onclick) 성능이 약간 우수하지만 차이가 있음을 의심합니다.

그것들이 다른 일을한다는 점은 주목할 가치가 .click있습니다 : 모든 jQuery 컬렉션에 바인딩 할 수 있지만 바인딩 onclick하려는 요소에 대해 인라인으로 사용해야합니다. 또한 사용하는 바인딩 하나의 이벤트 만 할 수있는 onclick반면,.click 계속 바인딩 할 수 있습니다.

내 의견으로는, 나는 그것에 대해 일관되고 모든.click 곳에서 사용 하고 모든 JavaScript 코드를 함께 유지 하고 HTML과 분리합니다.

를 사용하지 마십시오 onclick. 당신이하고있는 일을 알지 못하면 아마 사용할 이유가 없습니다.

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout 등의 이벤트는 실제로 성능에 좋지 않습니다 ( Internet Explorer에서는 주로 그림 참조). Visual Studio를 사용하여 코드를 작성하는 경우 이러한 페이지를 실행하면 이들 중 하나가 모두 메모리를 차지하는 별도의 SCRIPT 블록을 생성하므로 성능이 저하됩니다.

말할 것도없이 우려 는 분리 해야합니다. JavaScript와 레이아웃은 분리해야합니다!

이러한 이벤트에 대해 짝수 핸들러를 작성하는 것이 좋습니다. 하나의 이벤트는 각각에 대해 수천 개의 개별 스크립트 블록을 작성하는 대신 수백 / 수천 개의 항목을 캡처 할 수 있습니다!

(또한 모든 사람들이 말하는 것입니다.)

jQuery 의 주요 아이디어 중 하나 는 불쾌한 HTML 코드 에서 JavaScript를 분리하는 것 입니다. 첫 번째 방법은 갈 길입니다.

대부분의 경우 기본 JavaScript 메소드는 성능이 유일한 기준일 때 jQuery보다 나은 선택이지만 jQuery는 JavaScript를 사용하고 개발을 쉽게합니다. 성능을 크게 저하시키지 않기 때문에 jQuery를 사용할 수 있습니다. 특정한 경우 성능 차이는 무시할 수 없습니다.

사용하는 첫 번째 방법 onclick jQuery가 아니라 단순히 Javascript이므로 jQuery의 오버 헤드를 얻지 못합니다. 각 요소에 이벤트 핸들러를 추가하지 않고 다른 요소에 추가해야 할 경우 선택기를 통해 jQuery 방법을 확장 할 수 있지만 이제는 jQuery를 사용해야하는지 여부 만 의문입니다.

개인적으로 jQuery를 사용하고 있기 때문에 일관성이 있고 스크립트에서 마크 업을 분리하므로 그대로 사용합니다.

첫 번째 방법은 선호하는 것입니다. 고급 이벤트 등록 모델을 사용합니다. 즉, 동일한 요소에 여러 핸들러를 연결할 수 있습니다. 이벤트 객체에 쉽게 액세스 할 수 있으며 처리기는 모든 함수 범위에서 작동 할 수 있습니다. 또한 동적입니다. 즉, 언제든지 호출 할 수 있으며 동적으로 생성 된 요소에 특히 적합합니다. jQuery를 사용하든 다른 라이브러리 또는 기본 메소드를 직접 사용하든 실제로 중요하지 않습니다.

인라인 속성을 사용하는 두 번째 방법은 많은 전역 함수 (네임 스페이스 오염으로 이어짐)가 필요하고 컨텐츠 / 구조 (HTML)와 동작 (JavaScript)을 혼합합니다. 사용하지 마십시오.

성능이나 표준에 대한 질문에 쉽게 대답 할 수 없습니다. 두 가지 방법은 완전히 다르며 다른 일을합니다. 첫 번째는 강력하지만 두 번째는 멸시를받습니다 (나쁜 스타일로 간주).

Onclick 함수 Jquery

$('#selector').click(function(){ //Your Functionality });