EventBubbling (EB01)
1: //<div id="outer">
2: // <p id="inner">Click me!</p>
3: //</div>
4: const outerDiv = document.getElementById('outer');
5: const innerParagraph = document.getElementById('inner');
6: innerParagraph.addEventListener('click', function(event) {
7: console.log('Inner paragraph clicked!');
8: //event.stopPropagation(); // Stop bubbling (uncomment this to prevent outer div click)
9: });
10: outerDiv.addEventListener('click', function(event) {
11: console.log('Outer div clicked!'); //this happens only if bubbling isn't stopped
12: });
13:
When an event occurs on an HTML element, it first triggers on that specific element. Then, unless explicitly stopped, the event "bubbles" up the DOM tree, triggering on each of the element's ancestors in turn. This process continues until it reaches the document's root. Inner paragraph clicked! Outer div clicked!
EventBubbling context:
ES6 context:
- (2024) Notes about JS Closures. #ES6
- (2024) Notes about Javascript asynchronous programming. #ES6
- (2022) Modern Javascript books #ES6 #Doc
- (2021) JS learning start point #ES6
- (2021) Maximilian Schwarzmüller Javascript lecture #ES6
- (2021) Javascript interview question from Happy Rawat #ES6
- (2021) Javascript tests #ES6
- (2016) New unique features of Javascript (updated). #ES6
Order a job
Comments (
)
)
Link to this page:
http://www.vb-net.com/JavascriptES6/EB01.htm
|
|