프론트엔드 첫걸음

이벤트 버블링과 stop propagation 본문

개발 공부/Javascript

이벤트 버블링과 stop propagation

차정 2022. 7. 9. 21:15

해당 코드펜 링크의 로고를 클릭하면 코드펜에서 콘솔에 찍히는 결과를 확인할 수 있다.

 

이벤트버블링이 발생하는 코드

See the Pen Untitled by JEONG (@cona) on CodePen.

 

👍 을 클릭하면 "like it"을 ,  title을 클릭하면 "title" 을 콘솔에 찍게 했을때 

title을 클릭하면 title만 찍히지만,

👍을 클릭했을 때는 like 와 title이 두번씩 찍힌다.

이 때 내가 유도하지 않은 title 이벤트의 target이 title클릭 했을 때의  target과 다르다는 점에 주목하자!

따봉 클릭 시 title 이벤트의 실제 클릭한 곳(event.target)은 따봉(span)
title클릭 시 title 이벤트의 실제 클릭한 곳(event.target)은 title(p)

 

이는 이벤트 버블링 때문이다.

(자식요소 클릭했을때 이벤트 버블링이 일어나서 상위요소의 이벤트를 발생시키는 효과가 일어났다.

이벤트버블링에 의한 이벤트 발생 시 currentTarget과 target이 다를 수 밖에 없다.)

 

이를 방지하기 위해서 

span안에 들어있는 함수의 매개변수로 event를 받아서

event.stopPropagation() 해준다.

 

이벤트버블링을 방지한 코드

See the Pen stopPropagation by JEONG (@cona) on CodePen.

 

* 인라인으로 들어있는 함수에 매개변수로 이벤트 전달할때는 반드시 'event'여야한다.

* 매개변수로 이벤트를 전달하지 않아도 함수안에서 이벤트를 갖다 쓸 수 있다! (new!)

코드펜의 코드들은 아래와 같이 써도 된다.(inline 안에서 매개변수 없이 함수 실행해도 함수안에서 event객체 불러올 수 있음!!!!!!)

 <body>
    <form action="">
      <div><input type="text" onchange="inputHandler()" /></div>
    </form>

    <p onclick="sayTitle()">Title <span onclick="sayLikeIt()"> 👍</span></p>

    <script>
      console.log('hi');
      function inputHandler() {
        console.log('test');
        console.log(event.target.value);
      }

      function sayLikeIt() {
        console.log(' 👍 이벤트');
        console.log('실제 클릭한 곳 : ' + event.target);
        console.log('지금 이벤트리스너가 달린 곳 :' + event.currentTarget);
      }

      function sayTitle() {
        console.log('title 이벤트 ');
        console.log('실제 클릭한 곳 : ' + event.target);
        console.log('지금 이벤트리스너가 달린 곳 :' + event.currentTarget);
      }
    </script>
  </body>

 

 

 

 

 

 

'개발 공부 > Javascript' 카테고리의 다른 글

스크롤이 끝나면 alert 띄우기 - removeEventListener  (0) 2022.07.16
Carousel 만들기  (0) 2022.07.15
async , defer - javascript 렌더링 순서 바꿔 성능높이기  (0) 2022.07.14
NodeList와 Array의 차이점  (0) 2022.04.03
?? null 병합 연산자  (0) 2022.03.16
'개발 공부/Javascript' Related Articles more