Event Delegation

Event Delegation là cách mà javascript engine xử lí khi chúng ta thêm một sự kiện cho một DOM
cha thì tất cả các DOM con của nó đều được nhận event đó. Ví dụ ta có ba div sau:

<div class=”one”>
 <div class=”two”>
   <div class=”three”>
   </div>
 </div>
</div>

Khi chúng ta tạo một event cho class one thì class two, class three cũng sẽ nhận event đó.

<script>
 const one = document.querySelector('.one');
 function logClassName(event) {
     console.log(this.classList.value);
 }
 one.addEventListener('click', logClassName));
</script>

Event Bubbling

Event Bubbling là cách mà event được lan truyền từ DOM con lên DOM cha. Nghĩa là, khi chúng ta click trên một phần tử con thì event click của phần tử cha nó cũng được gọi.

Ví dụ trên chúng ta thêm tất cả các sự kiện cho từng class one, two, three.

<script>
 const divs = document.querySelectorAll('div');
 function logClassName(event) {
    console.log(this.classList.value);
 }
 divs.forEach(div => div.addEventListener('click', logClassName));
</script>

Tất cả các div đều lắng nghe sự kiện click. Sau đây, chúng ta thử click lên class three nhé. Boom !!!
Màn hình log ra: three two one. Tại sao ta chỉ click trên div class three nhưng hai div còn lại bắt được event đó.

Đó là cách mà event bubbling chạy. Click vào con cũng đồng nghĩa là bạn đã click vào cha. Make sense !!!!

Vậy có cách nào khi click vào phần tử con, không gọi event của phần tử cha.

Yeah !!! Chúng ta đã có stopPropagation.

<script>
 const divs = document.querySelectorAll('div');
 function logClassName(event) {
     event.stopPropagation();
     console.log(this.classList.value);
 }
 divs.forEach(div => div.addEventListener('click', logClassName));
</script>

See? Click vào class three ko gọi class two, class one nữa. Cool 🙂