.on ( 'click')과 .click ()의 차이점
다음 코드간에 차이점이 있습니까?
$('#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 요소에 연결하려는 경우에 유용합니다.
다음은 클릭 이벤트를 적용하는 다양한 방법 목록입니다. 적절하게 선택 가능하거나 클릭이 작동하지 않는 경우 대안 중 하나를 시도하십시오.
$('.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
})
이제 click ()을 더 이상 사용하지 않으므로 on ( 'click')
인터넷과 일부 친구로부터 멀어지면 동적으로 요소를 추가 할 때 .on ()이 사용됩니다. 그러나 클릭 이벤트가 node.js에 AJAX를 보내야하는 간단한 로그인 페이지에서 사용하고 새로운 요소를 추가하면 다중 AJAX 호출을 시작했습니다. 클릭 ()으로 변경하면 모든 것이 올바르게되었습니다. 실제로 나는 전에이 문제에 직면하지 않았다.
$('.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를 사용하여 동일한 페치 된 데이터처럼 효과적으로 작동합니다. 업데이트 또는 삭제시 버튼이 작동하지 않는 경우 :
참고 URL : https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click
'development' 카테고리의 다른 글
| 텍스트 정렬 중심을 사용하는 중심 이미지? (0) | 2020.02.13 |
|---|---|
| 파이프로“티”를 사용하는 동안 파일에 stderr를 쓰려면 어떻게해야합니까? (0) | 2020.02.12 |
| Java String을 byte []로 변환하는 방법? (0) | 2020.02.12 |
| Java Persistence API에서 FetchType LAZY와 EAGER의 차이점은 무엇입니까? (0) | 2020.02.12 |
| 소수점 이하 두 자리까지 숫자 표시 (0) | 2020.02.12 |