일반적으로 이벤트 핸들러를 요소에 연결할 때 다음과 같이 핸들러 함수에 전달 된 첫 번째 인수의 .target 멤버를 사용하여 요소에 액세스 할 수 있습니다.
button.on('click', function(e) {
alert(e.target);
});
버튼 요소를 반환합니다.
내가 이해하려는 문제는 이벤트 핸들러가있는 요소 안에 요소가있을 때 이벤트의 대상이 핸들러가 연결된 요소가 아니라 내부 요소라는 것입니다. 이것은 이벤트 핸들러가 외부 요소에 첨부 된 데이터에 액세스해야 할 때 문제입니다.
<div class="outer" data-tag="i-need-this-data">
<b>Click Me</b>
</div>
이 마크 업으로에 이벤트를 부착 .outer하고 클릭하면 Click Meevent.target이되는 발생합니다 <b>대신의를 <div>. 외부 클래스를 확인하고을 볼 때까지 DOM을 올린 .outer다음 그런 방식으로 데이터에 액세스하는 것과 같은 해결 방법을 사용해야하므로 문제가됩니다 . 이 동작의 예는이 JSFiddle에서 볼 수 있습니다 : https://jsfiddle.net/qce23qhw/
JSFiddle의 첫 번째 예제는 원하지 않는 동작을 보여줍니다. 내부 사각형을 클릭하면 event.target이 내부 사각형이됩니다. 두 번째 예는 내 해결 방법의 구현을 보여줍니다.
클릭 한 요소 대신 핸들러 내부에서 핸들러가 첨부 된 요소를 가져 오는 더 깨끗한 방법이 있습니까?
이미 루프에서 사용중인 요소를 사용하십시오. this현재 요소로도 설정됩니다.
$$('.two').each(function(element) {
element.on('click', function(e) {
alert(this.dataset.tag);
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다