EventBubbling (EB02)
1: //<input id="myButton" type="button" value="myButton"></input>
2:
3: const myEventWithData = new CustomEvent('myCustomEventWithData', {
4: detail: { message: 'Hello from custom event!', id: 777 }
5: });
6:
7: document.addEventListener('myCustomEventWithData', (event) => {
8: console.log('Custom event with data:', event.detail);
9: });
10:
11: const button = document.getElementById("myButton");
12: button.addEventListener('myCustomEventWithData', function(event){
13: console.log('Custom event with data received on button:', event.detail);
14: });
15:
16: // Dispatch the event after listeners are registered
17: document.dispatchEvent(myEventWithData);
18:
Custom Event with Data (Event listeners must be registered before the event is dispatched)
Custom event with data: Object { message: "Hello from custom event!", id: 777 }
Attempting initialization: Date Wed Mar 12 2016 21:03:56 GMT+0200 (Eastern European Standard Time)
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/EB02.htm
|
|