event.path 와 event.composedPath() 을 이용하면 이벤트의 흐름 요소들을 파악해볼수가 있다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event 경로 파악하기</title>
</head>
<body>
<div class="container" id="container">
<div class="item item1" id="item1"><span id="span"></span></div>
<div class="item item2" id="item2">
<p></p>
</div>
<div class="item item3">
<input type="text" id="input"></input>
</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('input');
input.addEventListener('input', (e) => {
console.log(e.path);
console.log(e.composedPath());
})
})
</script>
</html>인풋창에서 값을 입력하면 e.path 속성과 e.composedPath() 속성이 출력 되도록 해보았다.
현재 입력한 요소의 흐름을 최상위 노드까지 배열로 반환한다.
e.path 는 IE 나 Edge 에서 호환이 되지 않으므로 E.composedPath() 속성을 사용해야한다.
https://brgndy.me/ 로 옮기는 중입니다 :)