티스토리 뷰

웹/부스트코스

[WEB]이벤트 버블링과 이벤트 위임(Event Bubbling and Event Delegation)

cll179 2018. 7. 29. 15:03

여러개의 이벤트 등록

- 여러개의 이벤트를 등록할 때 반복문을 이용해 이벤트를 여러개 등록 할 수 있다.

 

반복문 형식 :

*main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel= "stylesheet" href="css/style.css">
</head>
<body>
  <ul>
    <li>
      <img src="1.jpg" class="product-image" >    </li>
    <li>
      <img src="2.jpg" class="product-image" >    </li>
    <li>
      <img src="3.jpg" class="product-image" >  </li>
    <li>
      <img src="4.jpg" class="product-image" >
   </li>
  </ul>
  <section class="log"></section>
</body>
<script src=js/eventDelegation.js></script>
</html>
 cs

 

*style.css

1
2
3
4
5
6
7
8
9
10
11
12
li {list-style:none;}
ul > li {
  display:inline-block;
  padding:10px;
  border:1px solid gray;
}
.product-image {
  width:100px;
  height:auto;
}
 cs

 

*eventDelegation.js

1
2
3
4
5
6
7
8
var log = document.querySelector(".log");
var lists = document.querySelectorAll("ul > li");
 
for(var i = 0; i < lists.length; i++){
  lists[i].addEventListener("click",function(evt){
    log.innerHTML = "URL is " + evt.currentTarget.firstElementChild.src;
  });
}
 cs

 

- 하지만 반복문을 이용한 처리는 이벤트가 엄청나게 많은 경우 비효율적일 뿐만 아니라, 동적으로 생성된 요소의 이벤트처리를 해야할 경우 다시 이벤트 처리를 구현해야하는 번거로움이 존재한다.

- 이러한 번거로움을 피하기 위해서 우리는 이벤트 위임(Event Delegation)을 이용한다.

이벤트 버블링(Event Bubbling)

- 특정 요소에 이벤트가 발생했을 때, 해당 이벤트가 그 요소의 상위 요소로 전달되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.

- 클릭한 지점이 하위엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트리스너가 있는지 찾게 된다.
- 위 코드에서 eventDelegation.js 를 아래와 같이 수정한다.

 

* eventDelegation.js

1
2
3
4
5
var ul= document.querySelector("ul");
 
ul.addEventListener("click",function(evt){
  console.log(evt.target.tagName); //evt.target은 클릭한것, evt.currentTarget은 이벤트가 등록된 것
});
 cs

- 위와 같이 수정하고 ul > li > img 를 클릭하면 이벤트가 발생한다.

- 만약 이 상태에서 img, li, ul에 각각 이벤트를 등록했었다면, 3개의 이벤트 리스너가 실행되게 된다.


 

Event Bubbling과 Event Capturing의 이벤트 순서

출 처 : https://www.grapecity.com/en/blogs/html-and-wijmo-events/

 

 

이벤트 위임(Event Delegation)

- ul이벤트를 등록 하더라도 그 하위 요소에도 이벤트가 발생하는 것을 알게되었다.

- 위의 이벤트 버블링(Event Bubbling)을 이용하면 동적으로 태그가 하나 더 추가되더라도 이벤트를 따로 처리하지 않아도 된다.

1
2
3
4
5
6
var ul = document.querySelector("ul");
ul.addEventListener("click",function(evt) {
    if(evt.target.tagName === "IMG") {
      log.innerHTML = "clicked" + evt.target.src;
    }
});
 cs

 

- 예제를 보면, 이미지 태그는 padding 값이 있어서, img태그와 li 태그 사이에 공백이 존재한다. 이 부분(공백)을 클릭하면 이벤트가 발생하지 않는다. tagName이 LI라서 위에서 구현한 조건문으로 들어가지 않았기 때문이다.

1
2
3
4
5
6
7
8
9
10
var log = document.querySelector(".log");
var ul= document.querySelector("ul");
ul.addEventListener("click",function(evt){
  var target = evt.target;
  if(target.tagName === "IMG"){ //태그네임은 대문자로 나온다.
    log.innerHTML = "IMG URL 은 " + target.src;
  }else if(target.tagName === "LI"){ //테두리(padding 영역) 클릭시 이벤트 발생하게 하기
    log.innerHTML = target.firstElementChild.src;
  }
});
 cs

 

참고 사이트 : http://www.edwith.org/


※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > 부스트코스' 카테고리의 다른 글

[Spring]Spring IoC/DI 컨테이너  (0) 2018.07.31
[WEB]HTML Templating  (2) 2018.07.29
[WEB]Ajax 응답 처리와 비동기  (2) 2018.07.27
[WEB]JavaScript 배열  (0) 2018.07.06
[WEB]Maven이란?  (0) 2018.06.29
댓글