[addEventListner]

특징
1. 1개 이상을 사용할 수 있다.

2. event.target

3. bubble event(phase)

- capturing phase (html > body > grandparent > parent > child) : outside to in
- bubbling phase (child > paraent >grandparent > body > html) : inside to out

4. removeEventListner

=> closet('<tag name>') bc of working out the HTML hierarchy
onclick vs addEventListner

 

onclick : 마지막 등록된 핸들러만 실행
addEventListner: 1개 이상의 핸들러 '동시' 실행 가능

 

$button.addEventlistner("click", ( )=>{
console.log(event.target)};
-지금 이벤트가 일어나는 순간의 타겟의 정보값 확인 가능

 

활용

웹사이트에 팝업이 떴을 때 팝업의 바깥 배경 쪽을 클릭하면 팝업이 꺼지는 코드를 짠다고 할 때, window를 클릭했을 때 event.target이 어떤 요소인지 알아야 함수를 실행할 수 있을 것이다. 그럴 때 콘솔로 event.target을 출력해서 알아낸 후 사용한다.

window.addEventListener('click', (event) => {
	console.log(event.target)

이제 여기서 나온 event.target이 위에서 콘솔에 찍힌 요소와 같다면 함수를 실행하는 것으로 코드를 짜준다.

window.addEventListener('click', (event) => {
	if(event.target === 요소) {
    	팝업꺼지는함수();
    }

 

 

참조

https://velog.io/@a_in/-addeventeistener-javascript

https://www.youtube.com/watch?v=XF1_MlZ5l6M