다른 * Target 속성의 목적은 무엇입니까? MouseEvent 클래스에서

Question

가 여러 * 대상 이벤트 :

• target
• currentTarget
• relatedTarget

로, MouseEvent의 맥락에서 그들의 목적은 무엇인가?

Answer 1

이러한 속성은 JavaScript 마우스 이벤트와 동일합니다. JavaScript 이벤트는 DOM을 트래버스합니다 ("버블 링"이라고 함). target은 이벤트가 원래 발송 된 객체입니다. currentTarget은 이벤트 처리기가 연결된 객체입니다.

예는이 HTML 구조를 가지고 :

<ul id="list"> 
    <li>Entry 1</li> 
    <li>Entry 2</li> 
</ul> 

을 당신은 <ul> 요소 (중 자바 스크립트 또는 다트를 통해 개념은 동일)에 클릭 핸들러를 추가합니다.

"항목 2"를 클릭하면 클릭 핸들러가 호출됩니다 (이벤트가 "거품을 일으키기"때문에). target은 <li> 요소이고 currentTarget 요소는 <ul> 요소입니다. 어느 것을 사용해야하는지는 핸들러에서 무엇을하고 싶은지에 달려 있습니다. 예를 들어 target을 사용하여 "항목 2"를 숨기거나 currentTarget을 사용하여 전체 목록을 숨길 수 있습니다.

relatedTarget으로 참조되는 요소는 MouseEvent의 유형에 따라 다릅니다. 목록은 event.relatedTarget입니다. 위의 예에서 클릭 이벤트에는 관련 대상이 없기 때문에 null이됩니다.

관련 MDN 링크 : event.currentTarget, event.target