Event.target, Event.toElement 및 Event.srcElement의 차이점은 무엇입니까?


87

다음 코드가 있습니다.

document.oncontextmenu = function(evt) {
    evt = evt || window.event;
    console.log(evt.target, evt.toElement, evt.srcElement);
};

에서 마우스 오른쪽 버튼을 클릭하면 다음 <div class="foo"></div>이 반환됩니다.

div.foo, div.foo, div.foo

에서 마우스 오른쪽 버튼을 클릭하면 다음 <input>이 반환됩니다.

입력, 입력, 입력

모두 같은 결과를 가져 오는 것 같습니다. 그들 중 하나가 다른 것들과 다른 용도로 사용되는 상황이 있습니까?

답변:


78

이벤트 대상은 이벤트가 파견되는 요소이다 :

DOM 이벤트 흐름을 사용하여 이벤트 를 대상 으로하는 객체 입니다. 이벤트 대상은 속성 값입니다 .Event.target

srcElement을 (를) 얻는 IE 비표준 방법 target입니다.

현재 이벤트 대상은 현재 호출되는 이벤트 리스너를 가지고있는 요소이다 :

이벤트 흐름에서 현재 이벤트 대상 은 현재 전달되고 있는 이벤트 핸들러 와 연결된 객체 입니다. 이 개체는 이벤트 대상 자체이거나 상위 항목 중 하나 일 수 있습니다. 현재 이벤트가 목표로 변경 이벤트 다양한 통해 개체 개체에서 전파 위상 이벤트 흐름. 현재 이벤트 대상은 Event.currentTarget속성 값입니다 .

this이벤트 리스너 내부에서 사용 하는 것은 현재 이벤트 대상을 얻는 일반적인 (및 표준) 방법입니다.

어떤 종류의 이벤트에는 다음이 있습니다 relatedTarget.

EventTarget이벤트 유형에 따라 UI 이벤트와 관련된 보조를 식별하는 데 사용됩니다 .

fromElementtoElement를 얻기 위해 IE가 표준이 아닌 방법이 있습니다 relatedTarget.


7
Chrome 버전 60에서 "toElement"를 사용하고 있습니다. "IE 비표준 방식"입니까?
PandaWood aug

2
MSDN은 "비표준"이며 "웹에 접하는 프로덕션 사이트에서 사용하지 마십시오"라고 말합니다. developer.mozilla.org/en-US/docs/Web/API/Event/srcElement
TetraDev

최신 크롬은 "toElement"를 지원하지만 Mozilla Firefox는 지원하지 않습니다. Mozilla에서 몇 가지 경우를 지원하기 위해 'target'속성을 사용해야했습니다.
Vishal
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.