https://github.com/kubrianity/js-event-propagation-and-once

This repository shows how event propagation, event capture and bubbling are handled in JavaScript
https://github.com/kubrianity/js-event-propagation-and-once

Last synced: 30 days ago
JSON representation

This repository shows how event propagation, event capture and bubbling are handled in JavaScript

• Host: GitHub
• URL: https://github.com/kubrianity/js-event-propagation-and-once
• Owner: Kubrianity
• Created: 2022-07-25T17:44:19.000Z (over 2 years ago)
• Default Branch: root
• Last Pushed: 2022-07-27T19:22:41.000Z (over 2 years ago)
• Last Synced: 2024-11-07T09:36:19.323Z (3 months ago)
• Language: HTML
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JavaScript30 #25: js-event-propagation-and-once

This is a JavaScript practice, one of the JavaScript30 challenges by Wes Bos. 

This practice shows how event propagation including event capture and bubbling and once parameter are handled in JavaScript.

### 1. Event Bubbling 

When an event occurs on an element nested within other elements, the event runs on the innermost element first and then all the way up to parent elements one by one. 

If we want to stop that behaviour and apply our event only on the inner target element, we should use the following method inside our listener function.

```

 function logText(e) {

    console.log(this.classList.value);

    e.stopPropagation()

} 

 divs.forEach(div => div.addEventListener('click', logText)

```

### 2. Event Capturing

Event capturing can be seen as the opposite of event bubbling. In event capturing, an event propagates from the parent/outer element to the inner/target element. In order to enable this feature, we should pass **capture** parameter inside addEventListener() and set its value to true. Note that capture is false by default.

```

  divs.forEach(div => div.addEventListener('click', logText, {

    capture: true,

  }));

```

So, both event capturing and event bubbling are two ways of event propagation.

### 3. Once

If we want to our listener be invoked only once, we should pass **once** parameter inside addEventListener() method and set its value to true so that the listener would be removed when invoked.

```

  divs.forEach(div => div.addEventListener('click', logText, {

    once: true

  }));

  ```