.on('click')과 .click()의 차이
다음 코드와 다른 점이 있습니까?
$('#whatever').on('click', function() {
/* your code here */
});
그리고.
$('#whatever').click(function() {
/* your code here */
});
저는 사용 패턴이 다르다고 생각합니다.
나는 더 좋습니다.on1파운드가 .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);
});
"Alert!"를 눌러 경보를 표시합니다.여기에는 "클릭" 또는 "온"을 사용할 수 있습니다.
가 용할때를 사용할 때.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()이벤트 처리기를 통과하여 위임된 이벤트 처리기를 생성할 수 있다는 점에서selector변수, 반면에 매개변수, 에면반.click()하지 않다.언제.on()를 사용하지 않고 호출됩니다.selector 변수,이 변수는 동다같습니다음과작은의매수와 합니다..click()위임을 에는 이트위원경우하를 사용합니다..on().
.on() 1j 할 수 입니다.Query 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()할 수 , 이벤트 위임)..delegate()그리고..live()).
(그리고 분명히 "키업", "포커스" 등에 대한 다른 유사한 바로 가기 방법이 있습니다.)
제가 추가 답변을 올리는 이유는 당신이 전화하면 어떻게 되는지 언급하기 위해서입니다..click()매개 변수 없음:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");
를 ..trigger()으로 추가 이벤트 할 수도 , jQuery 이벤트 개체는 수 ..click().
코드으로 jQuery라는 이름의 jQuery를 볼 수 .click()(또는).keyup() 등)를 합니다..on()또는.trigger() 같은 있다는 할 수 있다는 것을 하지만, 분히이것그있것가확,다을만신수다니의합것미사를 사용하는 것을 의미합니다..click()대부분의 상황에서 걱정하거나 심지어 생각할 것도 없지만 이론적으로 특별한 상황에서는 문제가 될 수 있습니다.
으로, 다음과 같이 기록합니다..on()에서는 여러 이벤트를 한 줄에서 동일한 기능에 바인딩할 수 있습니다. 예를 들어 다음과 같습니다.
$("#whatever").on("click keypress focus", function(){});
.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
})
아니요, 없어요.
의 on()다른 오버로드와 바로 가기 메서드가 없는 이벤트를 처리하는 기능입니다.
그들은 같은 것처럼 보입니다...click() 함수의 설명서:
이 메서드는 .bind('click', 핸들러)의 바로 가기입니다.
on() 기능의 설명서:
jQuery 1.7에서 .on() 메서드는 이벤트 핸들러를 연결하는 데 필요한 모든 기능을 제공합니다.이전 jQuery 이벤트 메서드에서 변환하는 데 도움이 필요한 경우 .bind(), .delegate() 및 .live()를 참조하십시오..on()으로 바인딩된 이벤트를 제거하려면 .off()를 참조하십시오.
그들은 이제 클릭()을 더 이상 사용하지 않기 때문에('클릭')으로 가는 것이 가장 좋습니다.
인터넷과 몇몇 친구들로부터 배운 바로는 동적으로 요소를 추가할 때 .on()이 사용됩니다.그러나 클릭 이벤트가 AJAX를 node.js로 보내고 그에 따라 새로운 요소를 추가해야 하는 간단한 로그인 페이지에서 사용했을 때 다중 AJAX 호출을 호출하기 시작했습니다.클릭()으로 변경하자 모든 것이 정상적으로 진행되었습니다.사실 전에는 이 문제에 직면하지 않았습니다.
새로운 요소
위의 포괄적인 답변의 부록으로 클릭을 새 요소에 첨부할 경우 중요한 사항을 강조합니다.
- 첫 번째 선택기에 의해 선택된 요소(예: $("body")는 선언이 이루어질 때 존재해야 합니다. 그렇지 않으면 첨부할 것이 없습니다.
- 두 번째 인수로 대상 요소에 대한 유효한 선택기를 포함하여 .on() 함수에서 세 개의 인수를 사용해야 합니다.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });
- $(')보다 더 효과적입니다.'UPDATE'). 클릭(함수(){ });
- 메모리를 적게 사용하고 동적으로 추가된 요소에 대해 작동할 수 있습니다.
- 및 하여 동적으로 가 형식의 행 때 이벤트를 생성하지 경우가 . 시간은 "DITE" 또는 ""입니다.
$(document).on('click','.UPDATE',function(){ });업데이트 또는 삭제 시 jquery. 버튼을 사용하여 동일한 가져온 데이터처럼 효과적으로 작동하지 않습니다.
언급URL : https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click
'programing' 카테고리의 다른 글
| Postgres가 서버에 연결할 수 없습니다. (0) | 2023.05.14 |
|---|---|
| Interop을 사용하여 Excel에서 비어 있지 않은 마지막 열 및 행 인덱스 가져오기 (0) | 2023.05.14 |
| VB.NET: 시스템에서 확장 메서드를 사용할 수 없습니다.객체 인스턴스 (0) | 2023.05.14 |
| 사전 저장 콜백에서 레코드가 "새로 작성되었는지" 확인 (0) | 2023.05.14 |
| vb.net : 문자열을 문자열로 분할할 수 있습니까? (0) | 2023.05.14 |