애플센세 🪙 오배이안
이벤트 버블링이란?
어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상!
click 이벤트를 예로들면 클릭시에 해당 태그의 상위 부모요소까지 자동으로 클릭된다는 말!
즉, 상위 부모요소에도 클릭 이벤트가 있다면 그것도 실행이 되겠지라? 🤔
<div>
<div>
<p>안녕</p>
</div>
</div>위 코드도 보면 p태그 안녕이라는 글자를 클릭하면 브라우저는 사용자가 클릭을 3번 했다고 인지한다.
p태그,div태그,div태그 총 3개
이것이 이벤트 버블링이다. 원래 이렇게 작동하도록 설계되었지만 개발자의 의도에 맞지않게 발생하는 경우가 많다.
이런 문제를 해결할때 자주사용하는 이벤트 관련 함수/메소드가 있다! 😎 (우왕굿...! 이거 너무 라떼말인가...)
document.querySelector('원하는요소').addEventListener('click', function(e){
e.target;
e.currentTarget;
e.preventDefault();
e.stopPropagation();
})클릭 이벤트시에 발동되는 함수의 전달인자로 e 가 들어가 있는데, 이것은 event 를 지칭한다.
이벤트 헨들러 함수의 첫번째 매개변수(전달인자) 자리에는 event 자리이기 때문이다.
이벤트 관련 함수/메소드
e.target: 클릭이벤트에서 사용 시 실제로 클릭한 HTML 요소를 알려준다.!!! 우왕굿!!!!!👍🏻🥳
e.currentTarget: 현재 이벤트리스너가 달린 곳을 알려준다!!!
e.preventDefault(): 이벤트의 기본동작을 막아준다!!!!!!!!
e.stopPropagation(): 실행하면 상위요소로의 이벤트 버블링을 중단해줌!!!!!!! 상위로임!!!!
