JS-이벤트 관련 함수들

이벤트 관련 함수들

 document.querySelector(".black-bg").addEventListener("click", function () {
document.querySelector(".black-bg").classList.remove("show-modal");
 });

위의 상황에서 eventlistener의 콜백함수의 파라미터에 e를 넣게되면, 아래의 것들 사용 가능

 document.querySelector(".black-bg").addEventListener("click", function (e) {
document.querySelector(".black-bg").classList.remove("show-modal");
 });

e.target; -> 유저가 실제로 누른거

위의 script에서 console.log(e.target); 을 입력 한 뒤, 콘솔창을 띄우고 h4를 onclick 하면 아래와 같이 출력되고,

흰 배경을 누르게 되면, 아래와 같이 출력 됨.

e.currentTarget; -> 이벤트리스너 달린 곳 알려줌 ** this라고도 표현 가능함

e.target과 e.currentTarget 을 비교 해 보자면

<div class="hi" style="width: 100px;height:100px">
	<h1>hi</h1>
</div>

let hi = document.querySelector('.hi');

hi.addEventListener('click',function(e) {
  console.log("currentTarget", e.currentTarget);
  console.log("target", e.target);
})

위의 경우, div을 클릭시, 아래와 같이 나오고

h1을 클릭시 , 아래와 같이 나온다.

**결론 :
e.currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다.
e.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환하고
e.currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.

e.preventDefault(); -> 이벤트 기본동작 막아줌
e.stopPropagation(); -> 상위요소로 이벤트 버블링 안되게 막아줌.