| OLD | NEW |
| (Empty) |
| 1 <head> | |
| 2 <script> | |
| 3 function attachListener() { | |
| 4 document.getElementById("target").addEventListener("click", listenerFuncti
on, true); | |
| 5 document.getElementById("targetParent").addEventListener("click", listener
FunctionParent, true); | |
| 6 } | |
| 7 function listenerFunctionParent(event) { | |
| 8 event.target.textContent = "event handled"; | |
| 9 } | |
| 10 function listenerFunction(event) { | |
| 11 event.target.textContent = "event handled"; | |
| 12 } | |
| 13 </script> | |
| 14 </head> | |
| 15 <body onload="attachListener()"> | |
| 16 <div id="targetParent"> | |
| 17 <div id="target"></div> | |
| 18 </div> | |
| 19 <p>To begin test, open DevTools, select the Elements panel. Expand the Event Lis
teners | |
| 20 pane in the sidebar. | |
| 21 <ul> | |
| 22 <li>Choose the <b><div id="targetParent"...></b> element. | |
| 23 You should see the "click" section in the Event Listeners pane. Expand the secti
on to see | |
| 24 the "listenerFunctionParent" function (at "div#targetParent") under it. | |
| 25 <li>Expand the targetParent node in the tree and choose the <b><div id="tar
get"...></b> | |
| 26 element. You should see the "click" section in the Event Listeners pane. Expand
the section | |
| 27 to see two functions, "listenerFunctionParent" (at "div#targetParent") and | |
| 28 "listenerFunction" (at "div#target") under it. | |
| 29 </ul> | |
| 30 </body> | |
| OLD | NEW |