복붙노트

[JQUERY] 온 클릭 VS jQuery.click ()

JQUERY

온 클릭 VS jQuery.click ()

해결법

  1. 1.이 표준 이벤트 등록 모델을 다음과 같이 $를 사용 ( '# myDiv'). 클릭 (함수 () {낫다. (jQuery를 내부적하여 addEventListener와는 attachEvent 사용).

    이 표준 이벤트 등록 모델을 다음과 같이 $를 사용 ( '# myDiv'). 클릭 (함수 () {낫다. (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/

    현대 이벤트 등록 정보 -> 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

  2. 2.더 나은 성능을 위해, 기본 자바 스크립트를 사용합니다. 빠른 개발을 위해, jQuery를 사용합니다. 기본 요소 성능 대 jQuery를에서 성능 비교를 확인합니다.

    더 나은 성능을 위해, 기본 자바 스크립트를 사용합니다. 빠른 개발을 위해, jQuery를 사용합니다. 기본 요소 성능 대 jQuery를에서 성능 비교를 확인합니다.

    내가 32 비트 Windows 서버에서 파이어 폭스 16.0에서 테스트를 수행 한 2008 R2 / 7 64 비트

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

    클릭 이벤트의 경우, 기본 클릭 이벤트 바인딩 대 JQuery와 트리거 또는 jQuery를 대 기본 브라우저 이벤트를 확인합니다.

    32 비트 Windows 서버에서 크롬 22.0.1229.79에서 테스트 2008 R2 / 7 64 비트

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

  3. 3.내가 이해에서 귀하의 질문에 정말 약 jQuery를 사용 여부 없습니다. 그것은 오히려 : 그것은 인라인 HTML 또는 이벤트 리스너를 통해 더 나은 바인드 이벤트인가?

    내가 이해에서 귀하의 질문에 정말 약 jQuery를 사용 여부 없습니다. 그것은 오히려 : 그것은 인라인 HTML 또는 이벤트 리스너를 통해 더 나은 바인드 이벤트인가?

    인라인되지 않습니다 바인딩. 또한이 방법 만 특정 이벤트에 하나 개의 함수를 바인딩 할 수 있습니다.

    그러므로 나는 이벤트 리스너를 사용하는 것이 좋습니다. 이 방법을 사용하면 하나의 이벤트에 많은 기능을 결합하는 것이 필요한 경우 나중에 바인딩을 해제 할 수 있습니다. 이 순수 자바 스크립트 코드를 살펴 보자 :

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

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

    CSTE 연구진 또는 .click 기능 : - 당신은 이미 당신의 프로젝트에 jQuery를 포함하는 경우, 단지 jQuery를 사용합니다.

  4. 4.당신은 그들을 결합 수, 클릭에 기능을 결합하기 위해 jQuery를 사용

    당신은 그들을 결합 수, 클릭에 기능을 결합하기 위해 jQuery를 사용

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

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

function divFunction(){
 //some code
}

  5. 5.그것은 당신에게 표준과 성능을 모두 제공하므로 이것에 대한 이동합니다.

    그것은 당신에게 표준과 성능을 모두 제공하므로 이것에 대한 이동합니다.

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

    두 번째 방법은 간단한 자바 스크립트 코드는 빠른 jQuery를보다로서. 하지만, 여기에 성능은 거의 동일합니다.

  6. 6.이 HTML에서 자바 스크립트 코드를 분리하기 때문에 $ ( '# myDiv'). 클릭은 더 좋다. 하나는 페이지 행동과 구조 다른를 유지하려고한다. 이것은 많은 도움이됩니다.

    이 HTML에서 자바 스크립트 코드를 분리하기 때문에 $ ( '# myDiv'). 클릭은 더 좋다. 하나는 페이지 행동과 구조 다른를 유지하려고한다. 이것은 많은 도움이됩니다.

  7. 7.이럴는, 온 클릭을 통해 .click 다음과 같은 조건이 충족되는 경우에만 선호하는 방법입니다 :

    이럴는, 온 클릭을 통해 .click 다음과 같은 조건이 충족되는 경우에만 선호하는 방법입니다 :

    나는 때문에 모바일 기기에서 자바 스크립트 엔진은 4 ~ 7 배 느린 같은 세대에 만들어진 데스크톱에 비해 있다는 사실이 의견을 형성했다. 내 모바일 장치에서 사이트를 방문하여 jQuery를 내 사용자 경험과 배터리 수명의 비용으로 모든 이벤트 바인딩하기 때문에 과민 스크롤을받을 때 나는 그것을 싫어. 이것은 단지 정부 기관과 우려해야하지만, 또 다른 최근의 지원 요인,), 우리는 IE7 팝업 자바 스크립트 프로세스가 긴 ... 대기 취소 과정을하고 있음을 알리는 메시지 상자로했다. 이 jQuery를 통해에 바인딩 할 요소가 많이 있었다마다 일어났다.

  8. 8.작품의 차이. 당신이) (클릭 사용하는 경우, 당신은 몇 가지 기능을 추가 할 수 있지만이 속성을 사용하는 경우, 하나의 기능이 실행됩니다 - 마지막입니다.

    작품의 차이. 당신이) (클릭 사용하는 경우, 당신은 몇 가지 기능을 추가 할 수 있지만이 속성을 사용하는 경우, 하나의 기능이 실행됩니다 - 마지막입니다.

    데모

    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')" )

    우리가 직접 항상 빠른 사용하는 경우, 성능에 대해 이야기하지만, 속성으로 사용하는 경우에는 하나의 기능을 할당 할 수 있습니다.

  9. 9.우려의 분리는 여기에 핵심이며, 이벤트가 바인딩 때문에 일반적으로 인정 된 방법이다. 이는 기존의 답변이 많이 말한 기본적으로.

    우려의 분리는 여기에 핵심이며, 이벤트가 바인딩 때문에 일반적으로 인정 된 방법이다. 이는 기존의 답변이 많이 말한 기본적으로.

    그러나 너무 빨리 선언적 마크 업의 개념을 버리지 않습니다. 그것은 그것의 장소를 가지고 있으며, AngularJS와 같은 프레임 워크의 핵심이다.

    그것은 일부 개발자에 의해 학대했기 때문에

    전체가 일부 내용은 너무 많이 부끄럽게 것을 이해있을 필요가있다. 그래서 많은 테이블처럼 신성 모독 비율의 지점에 도달. 일부 개발자들은 실제로 테이블 형식의 데이터에 대한 테이블을 피하십시오. 그것은 이해없이 행동하는 사람의 완벽한 예입니다.

    내보기에서 내 행동 별도의 유지의 아이디어를 좋아하지만. 나는 마크 업 아무 문제가 (의 행동 것으로, 그것을하지 않습니다 방법) 무엇을 선언하지 참조하십시오. 그것은 훨씬 부트 스트랩 자바 스크립트 구성 요소처럼, 실제 온 클릭 속성 또는 사용자 정의 속성의 형태가 될 수 있습니다.

    이 방법은 바로 마크 업에 반짝이기는하지만, 대신 자바 스크립트 이벤트 바인더를 조회 리버스 노력의, 수행이 무엇인지 볼 수 있습니다.

    그래서, 위의 세 번째 대안으로, 데이터를 사용하여 declarativly 마크 업 내에서 동작을 발표 할 속성. 동작은보기 밖으로 유지하지만, 한 눈에 당신은 무슨 일이 일어나고 있는지 볼 수 있습니다.

    부트 스트랩 예 :

    <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

    두 번째 예와의 주요 단점은 글로벌 네임 스페이스의 오염 참고. 이 자동 범위와 각도과 NG 클릭 속성과 같은 세 번째 위의 대안, 또는 프레임 워크를 사용하여 중 하나에 의해 피할 수있다.

  10. 10.

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

    온 클릭, onMouseover와, onmouseout 등의 이벤트는 (그림을 이동, 주로 Internet Explorer에서)의 성능을 실제로 나쁘다. 당신이있는 페이지를 실행하면 비주얼 스튜디오를 사용하면 코드 경우, 다음의 모든 하나 하나가 메모리를 차지, 따라서 성능이 둔화 별도의 스크립트 블록을 생성합니다.

    하지 언급하는 우려의 분리를해야한다 : 자바 스크립트와 레이아웃이 분리되어야한다!

    그것은 이러한 이벤트 중 어떤 evenHandlers를 만드는 항상 더 나은, 하나 개의 이벤트 대신 각각에 대해 별도의 스크립트 블록의 수천을 만드는 항목의 수백 / 수천을 캡처 할 수 있습니다!

    (또한, 다른 모든 것들 모두가 말하고있다.)

  11. 11.둘 중 하나는 서로 다른 목적으로 사용될 수 있음을 더 나은입니다. 온 클릭 (실제로 온 클릭해야합니다) 아주 약간 더 나은 수행하지만, 내가보기 엔 당신이 차이가를 알 수 의심한다.

    둘 중 하나는 서로 다른 목적으로 사용될 수 있음을 더 나은입니다. 온 클릭 (실제로 온 클릭해야합니다) 아주 약간 더 나은 수행하지만, 내가보기 엔 당신이 차이가를 알 수 의심한다.

    그것은 가치가 서로 다른 일을한다는 지적이다 : 온 클릭하면이에 바인딩 할 요소에 사용되는 인라인이어야한다 반면 .click은 어떤 jQuery를 컬렉션에 바인딩 할 수 있습니다. 당신은 또한 바인딩 .click 당신이 바인드 이벤트를 계속 할 수있는 반면, onclick을 사용하는 하나의 이벤트입니다.

    내 생각에, 나는 그것에 대해 일치 그냥 사방 .click 사용하고 내 모든 자바 스크립트 코드를 함께 유지하고 HTML에서 분리 된 것이다.

    onclick을 사용하지 마십시오. 당신이 무슨 일을하는지 알고, 당신은 아마하지 않는 한 그것을 사용하는 어떤 이유가 없습니다.

  12. 12.음, jQuery를 뒤에 주요 아이디어 중 하나는 불쾌한 HTML 코드에서 자바 스크립트를 분리하는 것입니다. 첫 번째 방법은 갈 수있는 방법입니다.

    음, jQuery를 뒤에 주요 아이디어 중 하나는 불쾌한 HTML 코드에서 자바 스크립트를 분리하는 것입니다. 첫 번째 방법은 갈 수있는 방법입니다.

  13. 13.대부분의 경우, 기본 자바 스크립트 방법은 성능이 유일한 기준 인 경우 jQuery를 통해 더 나은 선택이지만, jQuery를 자바 스크립트를 사용합니다 쉽게 개발한다. 너무 많이하지 디그레이 성능을처럼 당신은 jQuery를 사용할 수 있습니다. 특정 경우, 성능의 차이는 무시할 수있다.

    대부분의 경우, 기본 자바 스크립트 방법은 성능이 유일한 기준 인 경우 jQuery를 통해 더 나은 선택이지만, jQuery를 자바 스크립트를 사용합니다 쉽게 개발한다. 너무 많이하지 디그레이 성능을처럼 당신은 jQuery를 사용할 수 있습니다. 특정 경우, 성능의 차이는 무시할 수있다.

  14. 14.당신이 jQuery를의 오버 헤드를하지 않도록 onclick을 사용하는 첫 번째 방법은, jQuery를 단순히 자바 스크립트 없습니다. 각 요소에 이벤트 핸들러를 추가하지 않고 다른 요소에 추가하기 위해 필요한 경우의 jQuery 방법은 선택기를 통해 확장 할 수 있지만 지금이 당신이 jQuery를 여부를 사용해야 할 경우 그것은 단지 문제이다.

    당신이 jQuery를의 오버 헤드를하지 않도록 onclick을 사용하는 첫 번째 방법은, jQuery를 단순히 자바 스크립트 없습니다. 각 요소에 이벤트 핸들러를 추가하지 않고 다른 요소에 추가하기 위해 필요한 경우의 jQuery 방법은 선택기를 통해 확장 할 수 있지만 지금이 당신이 jQuery를 여부를 사용해야 할 경우 그것은 단지 문제이다.

    당신이 jQuery를 사용하고 개인적으로 이후이 일치하고 스크립트에서 마크 업 분리처럼 나는 그것으로 스틱 것이다.

  15. 15.첫 번째 방법은 선호하는 것입니다. 그것은 당신이 같은 요소에 여러 핸들러를 첨부 할 수 있습니다 즉, [S] 고급 이벤트 등록 모델을 사용합니다. 당신은 쉽게 이벤트 개체에 액세스 할 수 있으며, 핸들러는 어떤 기능의 범위에 살 수 있습니다. 또한, 동적 그것이 언제 호출 할 수있는 즉,이고, 특히 동적으로 생성 된 소자에 적합하다. 당신이 jQuery를, 타 도서관이나 기본 방법을 사용하든 직접별로 중요하지 않습니다.

    첫 번째 방법은 선호하는 것입니다. 그것은 당신이 같은 요소에 여러 핸들러를 첨부 할 수 있습니다 즉, [S] 고급 이벤트 등록 모델을 사용합니다. 당신은 쉽게 이벤트 개체에 액세스 할 수 있으며, 핸들러는 어떤 기능의 범위에 살 수 있습니다. 또한, 동적 그것이 언제 호출 할 수있는 즉,이고, 특히 동적으로 생성 된 소자에 적합하다. 당신이 jQuery를, 타 도서관이나 기본 방법을 사용하든 직접별로 중요하지 않습니다.

    두 번째 방법은, 인라인 속성을 사용하여 전역 함수 (네임 스페이스 오염 리드)과 동작 (자바 스크립트)와 혼합 내용 / 구조 (HTML)를 많이 필요로한다. 그것을 사용하지 마십시오.

    성능이나 표준에 대한 귀하의 질문은 쉽게 대답 할 수 없습니다. 두 가지 방법은 완전히 다른, 그리고 다른 일을. 첫 번째는 두 번째 멸시하는 동안 (나쁜 스타일을 고려), 강하다.

  16. 16.온 클릭 기능 JQuery와

    온 클릭 기능 JQuery와

    $ ( '# 선택'). ((기능을 클릭) { // 당신의 기능 });

  17. 17.내가 여기에이 측면에 초점을 맞출 것이다 - 그래서 이미 많은 좋은 답변은 저자는 때때로 성능에 대해 언급하지만, 실제로 아무도 아직 조사하지, 여기 그러나이있다. 솔루션 질문 추가로 몇 가지 다른 솔루션 (그들 중 일부는 다른 답변에서 언급했다)에 언급 위해 오늘은 크롬 83.0, 사파리 13.1와 파이어 폭스 77.0에서 테스트를 수행합니다.

    내가 여기에이 측면에 초점을 맞출 것이다 - 그래서 이미 많은 좋은 답변은 저자는 때때로 성능에 대해 언급하지만, 실제로 아무도 아직 조사하지, 여기 그러나이있다. 솔루션 질문 추가로 몇 가지 다른 솔루션 (그들 중 일부는 다른 답변에서 언급했다)에 언급 위해 오늘은 크롬 83.0, 사파리 13.1와 파이어 폭스 77.0에서 테스트를 수행합니다.

    그들이 요소 ID에서 작동하기 때문에 나는 해결책 여기에 A-H를 비교합니다. I는 솔루션의 결과를 표시하는 사용 클래스 기준으로 (I, J, K).

    사실은이 질문에 대한 성능 테스트를 설계 쉽지 않았다. 나는 모든 테스트 솔루션, 10K DIV-초 동안 이벤트를 트리거의 성능이 빨리 수동으로 내가 (아래 실행 스스로를 확인 니펫을 할 수 있습니다) 그들 사이의 차이를 감지 할 수 없음을 알 수 있습니다. 저는 두 경우에 생성 HTML과 바인드 이벤트 핸들러의 측정 실행 시간에 초점 그래서

    // https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick A = [... 어레이 (10000)]하자; 함수 깨끗한 () {test.innerHTML = ""; console.clear ()} 기능 divFunction (엘) { 을 console.log ( '클릭 : $ {el.id}`); } initA 함수 () { test.innerHTML a.map = ((X, I) => '

    $ {I} ') .join``; a.map ((X, I) => $ ( '# myDiv $ {I}`) .click (E => divFunction (e.target))); } initB 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ` ) .join``; } initC 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, I) => document.getElementById를 (myDiv '$ {I}`) .onclick = E => divFunction (e.target)); } initD 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, I) => document.getElementById를 (myDiv '$ {I}`) .addEventListener ('클릭 ', E => divFunction (e.target))); } initE 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, I) => document.querySelector ( '# myDiv $ {I}`) .onclick = E => divFunction (e.target)); } initF 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, ⅰ) => document.querySelector ( '# myDiv $ {}`난) .addEventListener ('클릭 ', E => divFunction (e.target))); } initG 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, I) => 윈도우 [myDiv '$ {I}`] .onclick = E => divFunction (e.target)); } initH 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; a.map ((X, I) => 윈도우 [`myDiv $는 {}`난] .addEventListener는 ( '클릭', E => divFunction (e.target))); } initI 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; . [... document.querySelectorAll은 (`.box`) (EL => el.onclick = E => divFunction (e.target))지도; } initJ 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; . [... document.querySelectorAll은 (`.box`)], MAP (EL => el.addEventListener ( '클릭', E => divFunction (e.target))); } initK 함수 () { test.innerHTML a.map = ((X, I) => '
    $ {I} ') .join``; $ (`.box`) .click (E => divFunction (e.target)); } 함수 계수 (F) { console.time ( "계수"+ f.name); 에프(); console.timeEnd ( "계수"+ f.name) } #테스트 { 표시 : 플렉스; 플렉스 랩 : 랩; } .box { 마진 : 1 x 1 픽셀; 높이 : 10px; 배경 : 빨간색; 폰트 사이즈 : 10px; 커서 : 포인터; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    이 조각 솔루션을 사용하는 유일한 선물. 문제 해결 단추로 클릭 한 다음 핸들러 트리거 할 수있는 빨간색 상자를 클릭 <버튼의 onclick = "측정 (initA)">은 <버튼의 onclick = "측정 (initB)"> B <버튼의 onclick = "측정 (initC)"> C <버튼의 onclick = "측정 (initD)"> D <버튼의 onclick = "측정 (initE)"> E <버튼의 onclick = "측정 (initF)"> F <버튼의 onclick = "측정 (initG) '> G <버튼의 onclick = "측정 (initH)"> H <버튼의 onclick = "측정 (initI)"> I <버튼의 onclick = "측정 (initJ)"> J <버튼의 onclick = "측정 (initK)"> K <버튼의 onclick = "클린 ()"> 클린

    여기에 크롬 예를 들어 테스트입니다

    18. from https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 모든 JQuery와 이벤트는 $ (문서)에 결합해야 하는가?  (0) 2020.09.23
[JQUERY] jQuery를 사용하여 양식 제출 [폐쇄]  (0) 2020.09.23
[JQUERY] 어떻게 특정 지수 (자바 스크립트)에서 배열에 항목을 삽입하려면?  (0) 2020.09.23
[JQUERY] 객체에 등록 된 이벤트 핸들러를 찾을 수 JQuery와  (0) 2020.09.23
[JQUERY] 자바 스크립트의 변수 변화를 듣기  (0) 2020.09.23
,

티스토리툴바