Event.path
- 이벤트가 발생된 노드에서 최상위 노드(Window) 까지의 상하관계를 배열로 표현해 놓은 것
예를 들면 아래와같은 구조 div 에서 이벤트를 발생시켜 path 출력시 ['div', 'body', 'html',.... ] 형태로 출력됨
<html>
<body>
<div>
...
const span1 = event.path[1].childNodes[0].innerHTML;
- 이벤트 발생한 곳의 부모 노드(0 번이 자기자신.. 갈수록 부모노드)가 가진 첫번째 요소의 내용을 가져 온다는 내용
Event.composedPath
- path 와 composedPath 동일한 내용
- composedPath를 권장
- 브라우저 마다 호환성이 다르기 때문에 호환되지 않는 브라우저에서 사용할 때는 폴리필을 참고
developer.mozilla.org/en-US/docs/Web/API/Event/composedPath#browser_compatibility
Event.composedPath() - Web APIs | MDN
The composedPath() method of the Event interface returns the event’s path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.var
developer.mozilla.org
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트/ES6] ES6 함수 화살표 표기법 (0) | 2021.02.03 |
|---|---|
| [자바스크립트] innerText와 innerHTML 차이점 (2) | 2021.02.02 |
| [자바스크립트] ToDoList 만들기 기본 Ver. - 로직 (0) | 2021.01.29 |
| [자바스크립트] ToDoList 만들기 응용 Ver. - 로직 (0) | 2021.01.29 |
| [자바스크립트] Event.target (0) | 2021.01.29 |