improve example, add live sample

mdn · leon-win · May 14, 2024 · May 14, 2024 · May 14, 2024 · May 15, 2024
commit 57ae530dc9061677ae676e998ed6616103890d64
@@ -89,96 +89,87 @@ There are five targets to consider:
 
 > **Note:** These properties are only available in Mozilla-based browsers.
 
-### Examples
+### Example
+
+```css hidden
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+th,
+td {
+ width: 50%;
+ border: 1px solid #ccc;
+ padding: 0.5rem;
+}
+
+p {
+ line-height: 1.5rem;
+}
+```
 
 ```html
-<!doctype html>
-<html lang="en-US">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <title>Comparison of Event Targets</title>
- <style>
- table {
- border-collapse: collapse;
- height: 150px;
- width: 100%;
- }
- td {
- border: 1px solid #ccc;
- font-weight: bold;
- padding: 5px;
- min-height: 30px;
- }
- .standard {
- background-color: #99ff99;
- }
- .non-standard {
- background-color: #902d37;
- }
- </style>
- </head>
- <body>
- <table>
- <thead>
- <tr>
- <td class="standard">
- Original target dispatching the event <small>event.target</small>
- </td>
- <td class="standard">
- Target who's event listener is being processed
- <small>event.currentTarget</small>
- </td>
- <td class="standard">
- Identify other element (if any) involved in the event
- <small>event.relatedTarget</small>
- </td>
- <td class="non-standard">
- If there was a retargeting of the event for some reason
- <small>event.explicitOriginalTarget</small> contains the target
- before retargeting (never contains anonymous targets)
- </td>
- <td class="non-standard">
- If there was a retargeting of the event for some reason
- <small>event.originalTarget</small> contains the target before
- retargeting (may contain anonymous targets)
- </td>
- </tr>
- </thead>
- <tr>
- <td id="target"></td>
- <td id="currentTarget"></td>
- <td id="relatedTarget"></td>
- <td id="explicitOriginalTarget"></td>
- <td id="originalTarget"></td>
- </tr>
- </table>
- <p>
- Clicking on the text will show the difference between
- explicitOriginalTarget, originalTarget, and target
- </p>
- <script>
- function handleClicks(e) {
- document.getElementById("target").innerHTML = e.target;
- document.getElementById("currentTarget").innerHTML = e.currentTarget;
- document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
- document.getElementById("explicitOriginalTarget").innerHTML =
- e.explicitOriginalTarget;
- document.getElementById("originalTarget").innerHTML = e.originalTarget;
- }
-
- function handleMouseover(e) {
- document.getElementById("target").innerHTML = e.target;
- document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
- }
-
- document.addEventListener("click", handleClicks, false);
- document.addEventListener("mouseover", handleMouseover, false);
- </script>
- </body>
-</html>
+<table>
+ <thead>
+ <tr>
+ <th>Event target</th>
+ <th>Value</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td><code>event.target</code></td>
+ <td><samp id="target"></samp></td>
+ </tr>
+
+ <tr>
+ <td><code>event.currentTarget</code></td>
+ <td><samp id="currentTarget"></samp></td>
+ </tr>
+
+ <tr>
+ <td><code>event.relatedTarget</code></td>
+ <td><samp id="relatedTarget"></samp></td>
+ </tr>
+
+ <tr>
+ <td><code>event.explicitOriginalTarget</code></td>
+ <td><samp id="explicitOriginalTarget"></samp></td>
+ </tr>
+
+ <tr>
+ <td><code>event.originalTarget</code></td>
+ <td><samp id="originalTarget"></samp></td>
+ </tr>
+ </tbody>
+</table>
+
+<p id="text">
+ <span>
+ Clicking on the text will show the difference between
+ explicitOriginalTarget, originalTarget, and target
+ </span>
+</p>
 ```
 
+```js
+function handleEvent(e) {
+ document.getElementById("target").innerHTML = e.target;
+ document.getElementById("currentTarget").innerHTML = e.currentTarget;
+ document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
+ document.getElementById("explicitOriginalTarget").innerHTML =
+ e.explicitOriginalTarget;
+ document.getElementById("originalTarget").innerHTML = e.originalTarget;
+}
+
+document.getElementById("text").addEventListener("click", handleEvent);
+document.getElementById("text").addEventListener("mouseover", handleEvent);
+```
+
+{{ EmbedLiveSample("Example", "100%", 300) }}
+
 ### Use of `target` and `relatedTarget`
 
 The `relatedTarget` property for the `mouseover` event holds the node that the mouse was previously over. For the `mouseout` event, it holds the node that the mouse moved to.