다음 코드간에 차이점이 있습니까?
$('#whatever').on('click', function() {
/* your code here */
});과
$('#whatever').click(function() {
/* your code here */
});답변
차이는 사용 패턴에 있다고 생각합니다.
내가 선호하는 것 .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");답변
다음 코드간에 차이점이 있습니까?
아니오, 귀하의 질문에있는 두 코드 샘플 사이에는 기능상의 차이가 없습니다. .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() { ... });답변
다른 답변에서 언급했듯이 :
$("#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(){});답변
아닙니다.
요점은 on()다른 과부하와 바로 가기 방법이없는 이벤트를 처리하는 기능입니다.
답변
그들은 같은 것으로 보인다 … click () 함수의 문서 :
이 메소드는 .bind ( ‘click’, handler)의 단축키입니다.
on () 함수 의 문서 :
jQuery 1.7부터 .on () 메소드는 이벤트 핸들러를 첨부하는 데 필요한 모든 기능을 제공합니다. 이전 jQuery 이벤트 메소드에서 변환하는 데 도움이 필요하면 .bind (), .delegate () 및 .live ()를 참조하십시오. .on ()으로 바인드 된 이벤트를 제거하려면 .off ()를 참조하십시오.
답변
.click 이벤트는 요소가 렌더링 될 때만 작동하며 DOM이 준비 될 때로드 된 요소에만 연결됩니다.
.on 이벤트는 DOM 요소에 동적으로 연결됩니다. 이는 이벤트가 Ajax 요청 또는 기타 사항 (DOM 준비 후)에서 렌더링되는 DOM 요소에 연결하려는 경우에 유용합니다.
