.on ( 'click')과 .click ()의 차이점
답변:
차이는 사용 패턴에 있다고 생각합니다.
내가 선호하는 것 .on이상의 .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);
});"경고!"를 원합니다 경고를 표시합니다. "click"또는 "on"을 사용할 수 있습니다.
우리가 사용할 때 click
$("button.alert").click(function() {
alert(1);
});위와 같이 선택기와 일치하는 모든 단일 요소에 대해 별도의 핸들러가 작성됩니다 . 그 의미는
- 일치하는 요소가 많으면 동일한 처리기가 많이 생성되어 메모리 사용량이 증가합니다.
- 동적으로 추가 된 항목에는 핸들러가 없습니다. 즉, 위의 HTML에서 새로 추가 된 "경고!" 핸들러를 리 바인드하지 않으면 버튼이 작동하지 않습니다.
우리가 사용할 때 .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});위와 같이 동적으로 생성 된 것을 포함하여 선택기와 일치 하는 모든 요소에 대한 단일 처리기 .
... 사용해야 할 또 다른 이유 .on
Adrien이 아래에서 언급했듯이 사용하는 또 다른 이유 .on는 네임 스페이스 이벤트입니다.
처리기를 추가 .on("click", handler)하면 일반적으로 처리기를 제거하면 .off("click", handler)처리기가 제거됩니다. 분명히 이것은 함수에 대한 참조가있는 경우에만 작동하므로 그렇지 않으면 어떻게됩니까? 네임 스페이스를 사용합니다.
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });바인딩을 통해
$("#element").off("click.someNamespace");on('click' ...) 참조 그리고 동시에, 내가 사용하는 것 중 하나만 바인딩 해제 할 수 있습니다on('click.darkenallothersections' ...)on('click.displaynextstep' ...).unbind('click.displaynextstep')
on()jQuery의 트렌드입니다. jQuery 3으로 업그레이드 $(window).load(function() {});할 $(window).on("load", function (e) {})때 업데이트해야했습니다.
다음 코드간에 차이점이 있습니까?
아니오, 귀하의 질문에있는 두 코드 샘플 사이에는 기능상의 차이가 없습니다. .click(fn)의 "바로 가기 방법"입니다 .on("click", fn). 에서 의 문서.on() :
.click()이벤트 핸들러를 첨부하거나 트리거하는 데 사용할 수있는 일부 이벤트에는 약식 메소드 가 있습니다. 속기 방법의 전체 목록은 events 카테고리를 참조하십시오 .
참고 것이 .on()다릅니다 .click()가 만들 수있는 능력이 있다는 점에서 위임 된 이벤트 핸들러를 통과하여 selector반면, 매개 변수는 .click()하지 않습니다. 때 .on()없이 호출 selector매개 변수, 그것과 완전히 동일하게 동작합니다 .click(). 이벤트 위임을 원하면을 사용하십시오 .on().
.on()jQuery 1.7부터 모든 이벤트 바인딩을 수행하는 데 권장되는 방법입니다. 다른 매개 변수를 전달할 때 동작을 변경하는 두 가지 기능 .bind()과 .live()하나 의 기능으로 모두 롤링 됩니다.
당신의 예를 썼을 때, 둘 사이에는 차이가 없습니다. 둘 다 핸들러를의 click이벤트에 바인딩합니다 #whatever. 원하는 경우 on()하위에서 발생한 이벤트 #whatever를 단일 핸들러 함수 에 위임 할 수있는 유연성을 제공 합니다.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()입니까? 또한 이것은 다른 기능과는 모순되는 것처럼 보이며,의 기능 만 가지고 .click()있으므로 향후 이벤트에는 적용되지 않습니다.
.on()일을 할 수있는 .click()수행 과 일을 .bind()하고 .live()할 - 그것은 당신이 그것을 호출 어떤 매개 변수 따라 달라집니다. (일부 다른 답변도이 문제를 언급했다.) 그 생각 참고 "바인딩을 #whatever 내부의 모든 링크"입니다 하지 어떻게 .live()하지, 그것은 무엇 .delegate()않습니다. 컨테이너를 지정하지 않고 .live()모든 내부에 바인딩합니다 document. 참고 또한 .live()이후 jQuery를 1.7에서 사용되지 않습니다.
다른 답변에서 언급했듯이 :
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })그럼에도 불구하고 이벤트 위임을 처리 할 수 있지 않은 .on()여러 가지 다른 매개 변수 조합 을 지원합니다 .click()(superceding .delegate()및 .live()).
(그리고 분명히 "키업", "포커스"등에 대한 다른 유사한 단축키 방법이 있습니다.)
추가 답변을 게시하는 이유는 .click()매개 변수없이 호출하면 어떻게되는지 언급하는 것입니다 .
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");.trigger()직접 사용하는 경우 추가 매개 변수 또는 jQuery 이벤트 객체를 전달할 수 있습니다 .click().
나는 또한 당신이 (JQuery와-1.7.1.js 단위)의 jQuery 소스 코드를 보면 당신이 내부적으로 볼 수 있음을 언급하고 싶었다 .click()(또는 .keyup(), 등) 함수가 실제로 호출 .on()또는 .trigger(). 분명히 이것은 그들이 실제로 동일한 결과를 가지고 있음을 확신 할 수 있지만, 사용하는 것이 .click()약간 더 많은 오버 헤드 를 가지고 있음을 의미합니다 . 대부분의 상황에서 걱정하거나 생각할 것이 아니라 이론적으로는 특별한 상황에서 중요 할 수 있습니다.
편집 : 마지막으로 .on()여러 이벤트를 한 줄에서 동일한 함수에 바인딩 할 수 있습니다.
$("#whatever").on("click keypress focus", function(){});.click().)
그들은 같은 것으로 보인다 ... click () 함수의 문서 :
이 메소드는 .bind ( 'click', handler)의 단축키입니다.
on () 함수 의 문서 :
jQuery 1.7부터 .on () 메소드는 이벤트 핸들러를 첨부하는 데 필요한 모든 기능을 제공합니다. 이전 jQuery 이벤트 메소드에서 변환하는 데 도움이 필요하면 .bind (), .delegate () 및 .live ()를 참조하십시오. .on ()으로 바인드 된 이벤트를 제거하려면 .off ()를 참조하십시오.
.click대.on
다음은 클릭 이벤트를 적용하는 다양한 방법 목록입니다. 적절하게 선택 가능하거나 클릭이 작동하지 않는 경우 대안 중 하나를 시도하십시오.
$('.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
})$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- $ ( '. UPDATE'). click (function () {});보다 효과적입니다.
- 더 적은 메모리를 사용하고 동적으로 추가 된 요소에 대해 작동 할 수 있습니다.
- 편집 및 삭제 버튼이있는 동적 인출 된 데이터는 행 데이터의 데이터를 편집하거나 삭제할 때 JQuery 이벤트를 생성하지 않습니다.이 시간
$(document).on('click','.UPDATE',function(){ });은 jquery를 사용하여 동일한 페치 된 데이터처럼 효과적으로 작동합니다. 업데이트 또는 삭제시 버튼이 작동하지 않는 경우 :
