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 |