이벤트 처리기가 처리기 내부에서 첨부 된 요소를 얻으려면 어떻게해야합니까? 요소에 이벤트 처리기를 부착 할 때

Question

일반적과 같이 핸들러 함수에 전달 된 첫 번째 인수의 .target 멤버를 사용하여 요소에 액세스 할 수 있습니다

button.on('click', function(e) { 
    alert(e.target); 
}); 

이 버튼 요소를 반환합니다.

내가 이해하려고하는 문제는 이벤트 처리기가있는 요소 안에 요소가있을 때 해당 이벤트의 대상은 처리기가 연결된 내부 요소가 아니라 내부 요소입니다. 내 이벤트 핸들러가 외부 요소에 첨부 된 데이터에 액세스해야 할 때 문제가됩니다. 이 마크 업으로

<div class="outer" data-tag="i-need-this-data"> 
    <b>Click Me</b> 
</div> 

, .outer에 이벤트를 부착하고 event.target 대신 <div>의 <b> 인 발생합니다 Click Me 클릭. 외부 클래스를 확인하고 DOM을 올라가서 .outer을 볼 때까지 그런 식으로 데이터에 액세스하는 등의 해결 방법을 사용해야하므로 문제가됩니다. 이 동작의 예제는이 JSFiddle에서 볼 수 있습니다. https://jsfiddle.net/qce23qhw/

JSFiddle의 첫 번째 예는 내부 스퀘어를 클릭하면 event.target이 내부 정사각형이됩니다. 두 번째 예는 내 대안의 구현을 보여줍니다.

클릭 한 요소 대신 처리기 내부에서 처리기가 연결된 요소를 가져 오는 더 명확한 방법이 있습니까?

Answer 1

이미 루프에서 사용중인 요소 만 사용하십시오. this는 현재의 구성 요소로 설정된다 :이 on 방법으로 소성

$$('.two').each(function(element) { 
    element.on('click', function(e) { 
     alert(this.dataset.tag); 
    }); 
}); 

Answer 2

. 그것은 당신을 수 있기 때문에

$(‘some_id’).observe(‘click’, function(evt){ 
    console.log(this.inspect()); // -> this is the element#some_id that was clicked 
}); 

이 on을 사용하여, 거의 항상 낫다 :

document.on(‘click’, ‘.foo’, function(evt, elm){ 
    console.log(elm.inspect()); // -> elm is the element.foo that was clicked 
}); 

것은 당신이 사용하는 경우이 이벤트에 응답 객체가 콜백에서 두 번째 속성을합니다 관찰중인 요소를 DOM에서 제거하고 대체 한 다음 관찰자를 다시 인스턴스화하지 않고 관찰합니다.