이벤트 위임을 사용하면 단일 이벤트 리스너를 부모 요소에 연결할 수 있으며, 해당 하위 항목이 현재 존재하는지 또는 미래에 추가되는지 여부에 관계없이 선택자와 일치하는 모든 하위 항목에 대해 실행됩니다.
링크예
나머지 단원에서는 다음 HTML 구조를 참조합니다.
<html>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://domain4.com">Item #4</a></li>
</ul>
</div>
</body>
</html>그룹 의 앵커를 #list클릭하면 해당 텍스트를 콘솔에 기록하려고 합니다. 일반적으로 다음 메서드를 사용하여 각 앵커의 클릭 이벤트에 직접 바인딩할 수 있습니다 .
// Attach a directly bound event handler $( "#list a" ).on( "click", function( event ) { event.preventDefault();
console.log( $( this ).text() );
});
이것은 완벽하게 작동하지만 단점이 있습니다. 위의 리스너를 이미 바인딩한 후에 새 앵커를 추가할 때 어떤 일이 발생하는지 고려하십시오.
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );새로 추가된 항목을 클릭하면 아무 일도 일어나지 않습니다. 이는 이전에 첨부한 직접 바인딩된 이벤트 핸들러 때문입니다. 직접 이벤트는 메서드가 호출될 때만 요소에 연결됩니다 .on(). 이 경우 새 앵커가 호출될 때 존재하지 않았기 때문에 .on()이벤트 핸들러를 가져오지 않습니다.
이벤트 전파
이벤트 전파 방법을 이해하는 것은 이벤트 위임을 활용할 수 있는 중요한 요소입니다. 앵커 태그 중 하나를 클릭할 때마다 해당 앵커에 대한 클릭 이벤트가 발생한 다음 DOM 트리를 버블링하여 각 상위 클릭 이벤트 핸들러를 트리거합니다.
즉, 바인딩된 앵커 태그 중 하나를 클릭할 때마다 전체 문서 본문을 효과적으로 클릭하는 것입니다! 이를 이벤트 버블링 또는 이벤트 전파 라고 합니다 .
이벤트가 어떻게 버블링되는지 알고 있으므로 위임된 이벤트를 만들 수 있습니다.
// Attach a delegated event handler $( "#list" ).on( "click", "a", function( event ) { event.preventDefault();
console.log( $( this ).text() );
});
a선택기에서 메서드의 두 번째 매개 변수 위치로 부분을 어떻게 이동했는지 확인하십시오 .on(). 이 두 번째 선택기 매개변수는 핸들러에게 지정된 이벤트를 수신하도록 지시하고 이벤트가 들리면 해당 이벤트의 트리거 요소가 두 번째 매개변수와 일치하는지 확인합니다. 이 경우 트리거 이벤트는 해당 매개변수와 일치하는 앵커 태그입니다. 일치하므로 익명 함수가 실행됩니다. 이제 기존 앵커 태그에만 알 수 없는 수의 직접 바인딩된 이벤트를 첨부하는 대신 하위 앵커의 클릭을 수신하는 단일 클릭 이벤트 리스너를 첨부했습니다 .
트리거 요소 사용
해당 링크가 외부 링크인 경우 새 창에서 링크를 열려면 어떻게 해야 합니까(여기서는 "http"로 시작하는 것으로 표시됨)?
// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) { var elem = $( this );
if ( elem.is( "[href^='http']" ) ) {
elem.attr( "target", "_blank" );
}
});
이것은 단순히 요소의 속성이 "http"로 시작하는지 .is()확인하기 위해 선택자를 메서드에 전달합니다. 또한 기본 동작( 을 따르는 것)이 발생하기를 원하므로 명령문을 href제거했습니다 .event.preventDefault();href 선택자 매개변수를 허용하여 실제로 코드를 단순화할 수 있습니다 .
// Attach a delegated event handler with a more refined selector $( "#list" ).on( "click", "a[href^='http']", function( event ) { $( this ).attr( "target", "_blank" ); });
요약
이벤트 위임은 이벤트 전파(버블링)를 사용하여 이벤트가 발생한 요소보다 DOM의 상위 수준에서 이벤트를 처리하는 프로세스를 말합니다. 현재 또는 미래에 존재하는 요소에 대해 단일 이벤트 리스너를 연결할 수 있습니다.
'코딩 배우기' 카테고리의 다른 글
| 제이쿼리 이벤트 확장(jquery event extensions) (0) | 2023.05.24 |
|---|---|
| jquery 루프 외부에 추가 (0) | 2023.05.23 |
| 다중 클릭 이벤트 (0) | 2023.05.20 |
| jQuery history event 이란? (0) | 2023.05.19 |
| $(document).ready() (0) | 2023.05.18 |
댓글