$($).wtclick', '#id', 함수({}) 대 $('#id'.wtclick', 함수({})
저는 그들 사이에 무엇이 다른지 알아보려고 했습니다.
$(document).on('click', '#id', function(){});
그리고.
$('#id').on('click', function(){});
저는 그 둘 사이에 어떤 차이가 있는지, 또 있다면 그 차이가 무엇인지에 대한 정보를 찾을 수 없었습니다.
혹시 다른 점이 있다면 누가 설명해주실 수 있나요?
첫 번째 예는 이벤트 위임을 보여줍니다.이벤트 핸들러는 DOM 트리 위의 요소에 바인딩됩니다(이 경우,document이벤트가 셀렉터와 일치하는 요소에서 발생한 요소에 도달하면 실행됩니다.
이는 대부분의 DOM 이벤트가 원점에서 트리를 버블링하기 때문에 가능합니다.를 클릭하면.#idelement, 클릭 이벤트가 생성되어 모든 상위 element를 통해 버블업됩니다(측면 참고: 이벤트가 대상으로 트리를 내려올 때 이 전 단계가 실제로 존재합니다).당신은 그 조상들 중 누구라도 그 사건을 포착할 수 있습니다.
두 번째 예제는 이벤트 핸들러를 요소에 직접 바인딩합니다.처리기에서 이를 방지하지 않는 한 이벤트는 여전히 버블링되지만 처리기가 대상에 바인딩되어 있으므로 이 프로세스의 효과를 볼 수 없습니다.
이벤트 핸들러를 위임하면 바인딩 당시 DOM에 존재하지 않았던 요소에 대해 해당 이벤트 핸들러가 실행되도록 할 수 있습니다.당신의#id요소는 두번째 예제 다음에 생성되었으며 핸들러는 실행되지 않습니다.실행 시 DOM에 확실히 있는 요소에 바인딩함으로써 핸들러가 실제로 어떤 것에 부착되어 나중에 적절한 실행이 가능하도록 보장할 수 있습니다.
다음 코드를 고려합니다.
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
자, 여기 차이가 있습니다.
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
이제 내 작업을 다시 추가하면 어떨까요?
$('#myTask').append('<li>Answer this question on SO</li>');
이 내 작업 항목을 클릭하면 해당 항목이 바인딩된 이벤트 핸들러가 없으므로 목록에서 제거되지 않습니다.대신에 우리가 사용했더라면.on, 새로운 아이템은 우리측에서 별도의 노력없이 작동할 것입니다. 버전은 .on 버전은 과 같습니다.
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
요약:.
의 차이 .on()그리고..click()그것일 것.click()가을수다지e수e가ydnhtk을된c지우msme>.click()이벤트는 나중에 동적으로 추가됩니다..on()된될수다서다수ehee과 관련된 DOM 요소가 있는 상황에서 할 수 ..on()호출은 나중에 동적으로 생성될 수 있습니다.
언급URL : https://stackoverflow.com/questions/14879168/document-onclick-id-function-vs-id-onclick-function
'programing' 카테고리의 다른 글
| utf-8 인코딩된 텍스트를 MySQL 테이블에 로드하는 중 (0) | 2023.09.15 |
|---|---|
| "docker run -d" 후 도커 컨테이너가 자동으로 중지됩니다. (0) | 2023.09.15 |
| 문자열에 붙여넣기 (0) | 2023.09.15 |
| size_t 유형의 변수에 대한 교차 플랫폼 형식 문자열? (0) | 2023.09.15 |
| 비트 조작 모범 사례 (0) | 2023.09.15 |