Refer to the code below:
01
02
| Click me! |
07
08 function printMessage(event) {
09 console.log('Row log');
10 event.stopPropagation();
11 }
12
13 let elem = document.getElementById('row1');
14 elem.addEventListener('click', printMessage, false);
15
16
Which code change should be done for the console to log the following when "Click me!" is clicked?
Row log
Table log
Current behavior:
Clicking <td> triggers the click event on row1, then bubbles up to <table>.
printMessage runs, logs 'Row log', then event.stopPropagation() stops the event from bubbling to the table.
So 'Table log' never appears.
To allow the table's inline onclick to run after the row handler:
Remove the propagation stop:
function printMessage(event) {
console.log('Row log');
// event.stopPropagation(); // remove this
}
Now the event bubbles:
printMessage logs 'Row log'.
The table's onclick runs, logging 'Table log'.
Option A only changes capture/bubble phase but still stops propagation. C does nothing meaningful (stopPropagation takes no arguments). B removes the row handler entirely.
Currently there are no comments in this discussion, be the first to comment!