복붙노트

[JQUERY] CSTE 연구진은 .click 대 ( '클릭')의 차이 ()

JQUERY

CSTE 연구진은 .click 대 ( '클릭')의 차이 ()

해결법

  1. 1.나는 차이가 사용 패턴에, 생각한다.

    나는 차이가 사용 패턴에, 생각한다.

    전자는 동적으로 추가 요소 적은 메모리와 작업을 사용할 수 있습니다 CSTE 연구진은 이상의 .click 때문에 선호하는 것.

    다음 HTML을 고려 :

    <html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

    우리는을 통해 새로운 버튼을 추가 할 경우

    $("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

    및 "경고!"를 원하는 경고를 표시합니다. 우리는 하나를 사용하고 그것을 위해 "의" "클릭"또는 수 있습니다.

    $("button.alert").click(function() {
    alert(1);
});

    상기와 별도의 처리기는 셀렉터와 일치 할 때마다 하나의 요소에 대해 생성 얻는다. 그것의 의미는

    $("div#container").on('click', 'button.alert', function() {
    alert(1);
});

    위의와, 동적으로 생성 된 사람을 포함하여 선택과 일치하는 모든 요소에 대해 하나의 핸들러입니다.

    아드 아래 주석으로, CSTE 연구진 사용하는 또 다른 이유는 이벤트를 네임 스페이스입니다.

    당신이 ( "클릭", 핸들러) 일반적 .OFF로 제거 CSTE 연구진와 핸들러를 추가하는 경우 ( "클릭", 핸들러) 바로 그 핸들러를 제거합니다. 당신이 함수에 대한 참조가있는 경우 그렇지 만약에, 그래서 분명히 이것은 단지 작동? 당신은 네임 스페이스를 사용합니다 :

    $("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

    를 통해 바인딩 해제와

    $("#element").off("click.someNamespace");

  2. 2.아니, 귀하의 질문에 두 개의 코드 샘플 사이의 기능적 차이가 없습니다. .click (FN)은 ( "클릭", FN) CSTE 연구진에 대한 "바로 가기 방법"입니다. CSTE 연구진은 ()에 대한 문서에서 :

    아니, 귀하의 질문에 두 개의 코드 샘플 사이의 기능적 차이가 없습니다. .click (FN)은 ( "클릭", FN) CSTE 연구진에 대한 "바로 가기 방법"입니다. CSTE 연구진은 ()에 대한 문서에서 :

    .click ()가되지 않는 반면, 그 CSTE 연구진을 ()는 셀렉터 파라미터를 전달하여 위임 된 이벤트 핸들러를 생성하는 기능을 갖는 것을 .click 다르다 () 참고. CSTE 연구진 ()가 선택기 파라미터없이 호출 될 때, .click와 똑같은 동작 (). 당신이 이벤트 위임, 사용 CSTE 연구진을 원하는 경우에 ().

  3. 3.CSTE 연구진은 () jQuery를 1.7로 바인딩 모든 이벤트를 할 수있는 권장되는 방법입니다. 이 달라져 행동이 다른 매개 변수를 통과하는 것이 하나 개의 함수로 두 .bind ()와 .live ()의 모든 기능을 롤백합니다.

    CSTE 연구진은 () jQuery를 1.7로 바인딩 모든 이벤트를 할 수있는 권장되는 방법입니다. 이 달라져 행동이 다른 매개 변수를 통과하는 것이 하나 개의 함수로 두 .bind ()와 .live ()의 모든 기능을 롤백합니다.

    당신이 당신의 예를 쓴 것처럼, 둘 사이에 아무런 차이가 없다. #whatever의 클릭 이벤트에 대한 핸들러를 모두 바인드. (가) 당신은 위임 할 수 있도록 추가적인 유연성을 제공합니다 당신이 선택하면 이벤트, 하나의 핸들러 함수에 #whatever의 아이들졌습니다.

    // Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

  4. 4.다른 답변에서 언급 한 바와 같이 :

    다른 답변에서 언급 한 바와 같이 :

    $("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

    그 CSTE 연구진 ()하지만 주목하는 것은 .click 여러 가지 다른 매개 변수의 조합 ()이 이벤트 위임을 처리하는 것을 허용하지 않습니다 지원 (.delegate () 및 .live를 대체하는 ()).

    (그리고 분명히 "의 keyup", "초점"등의 다른 유사한 바로 가기 방법이 있습니다)

    내가 여분의 대답을 게시하도록하겠습니다 그 이유는 매개 변수없이 .click ()를 호출 할 경우 발생하는 언급하는 것입니다 :

    $("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

    당신이 .trigger를 사용하는 경우 () 직접 당신은 또한 당신이 .click로 할 수없는, 추가 매개 변수 또는 jQuery를 이벤트 객체를 전달할 수 있다는 지적 ().

    나는 또한 당신이 (JQuery와-1.7.1.js 단위)의 jQuery 소스 코드를 보면 당신은 내부적으로 .click () (또는 .keyup () 등) 실제로 호출 기능을 것을 볼 수 있습니다 언급하고 싶었다. 에 () 또는 .trigger (). 물론이 방법은 당신은 그들이 정말 같은 결과를 가지고 할 것을 확신 할 수 있지만, 그것은 또한) (.click를 사용하여 더 많은 오버 헤드가 작은 약간의 수단이 있는지 - 걱정하지 아무것도, 심지어 대부분의 경우에 대해 생각하지만, 이론적으로는 문제가 있습니다 특별한 상황이다.

    편집 : 마지막으로, CSTE 연구진은 ()는 예컨대 한 줄에 같은 기능에 여러 이벤트를 바인딩 할 수 있습니다 :

    $("#whatever").on("click keypress focus", function(){});

  5. 5.아니, 없다. 에서의 점 ()는 다른 과부하 및 바로 가기 방법이없는 핸들 이벤트에 있다는 것입니다.

    아니, 없다. 에서의 점 ()는 다른 과부하 및 바로 가기 방법이없는 핸들 이벤트에 있다는 것입니다.

  6. 6.그들은 클릭 () 함수에서 같은 ... 문서로 나타납니다

    그들은 클릭 () 함수에서 같은 ... 문서로 나타납니다

    온 () 함수에서 문서 :

  7. 7.DOM을가 준비되면 요소가 렌더링됩니다 만 요소에 연결된 경우에만 작업 .click 이벤트는로드.

    DOM을가 준비되면 요소가 렌더링됩니다 만 요소에 연결된 경우에만 작업 .click 이벤트는로드.

    이벤트는 동적으로 아약스 요청 또는 뭔가 다른 (DOM을 준비 후)에 렌더링되는 DOM 요소에 이벤트를 첨부 할 때 도움이되는 DOM 요소에 연결되어 CSTE 연구진은.

  8. 8.여기에서 클릭 이벤트를 적용하는 다른 방법의 목록을 얻을 것이다. 당신은 적합한 것으로 적절하게 선택하거나 클릭이 작동하지 않는 경우 단지 이들의 대안 아웃을 시도 할 수 있습니다.

    여기에서 클릭 이벤트를 적용하는 다른 방법의 목록을 얻을 것이다. 당신은 적합한 것으로 적절하게 선택하거나 클릭이 작동하지 않는 경우 단지 이들의 대안 아웃을 시도 할 수 있습니다.

    $('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

  9. 9.그들은 그래서 지금 가장 ( '클릭')에 함께 가고, 클릭 ()되지 않는 한

    그들은 그래서 지금 가장 ( '클릭')에 함께 가고, 클릭 ()되지 않는 한

  10. 10.지금까지와 같은 인터넷에서 ilearned 및 동적 요소를 추가 할 때 CSTE 연구진은 어떤 친구는 ()가 사용됩니다. 클릭 이벤트는 Node.js를과 반환 APPEND 새로운 요소에서 AJAX를 보내야 어디에서 간단한 로그인 페이지에서 그것을 사용하는 경우 그러나 멀티 AJAX 호출을 호출하기 시작했다. 내가 그것을 클릭하여 변경하면 () 모든 것이 잘 갔다. 사실 나는 전에이 문제에 직면하지 않았다.

    지금까지와 같은 인터넷에서 ilearned 및 동적 요소를 추가 할 때 CSTE 연구진은 어떤 친구는 ()가 사용됩니다. 클릭 이벤트는 Node.js를과 반환 APPEND 새로운 요소에서 AJAX를 보내야 어디에서 간단한 로그인 페이지에서 그것을 사용하는 경우 그러나 멀티 AJAX 호출을 호출하기 시작했다. 내가 그것을 클릭하여 변경하면 () 모든 것이 잘 갔다. 사실 나는 전에이 문제에 직면하지 않았다.

  11. 11.새로운 요소

    새로운 요소

    위의 종합적인 답변에 대한 추가 사항이 중요한 점을 강조로서 당신은 클릭이 새로운 요소에 연결하려는 경우 :

  12. 12.

    $('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

    13. from https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 아약스 - 요청 FormData 객체를 보내? [복제]  (0) 2020.09.22
[JQUERY] 어떻게 JQuery와 동기보다는 비동기, Ajax 요청을 수행 할 수 있습니까?  (0) 2020.09.22
[JQUERY] jQuery를 : 아약스 호출 성공 후 반환 데이터 [중복]  (0) 2020.09.22
[JQUERY] 어떻게 일시적으로 스크롤 해제하는 방법?  (0) 2020.09.22
[JQUERY] Attr의 대 jQuery를 데이터?  (0) 2020.09.22
,

티스토리툴바