Skip to content

Commit 99487ce

Browse files
addsoupbaseJosh-Cenabsmth
authored
fixed broken DOMActivate example (mdn#39846)
* fixed broken example Fixed broken, overly complicated example, as well as other stuff like 'see also'. * Update index.md * Update index.md * Update index.md * Update index.md --------- Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Brian Smith <brian@smith.berlin>
1 parent 8745b31 commit 99487ce

File tree

1 file changed

+27
-54
lines changed
  • files/en-us/web/api/element/domactivate_event

1 file changed

+27
-54
lines changed

files/en-us/web/api/element/domactivate_event/index.md

Lines changed: 27 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -14,71 +14,46 @@ The **`DOMActivate`** event is fired at an element when it becomes active, such
1414

1515
## Syntax
1616

17-
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
17+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}.
1818

1919
```js-nolint
2020
addEventListener("DOMActivate", (event) => { })
21-
22-
onDOMActivate = (event) => { }
2321
```
2422

23+
> [!NOTE]
24+
> There is no `onDOMActivate` event handler property for this event.
25+
2526
## Event type
2627

27-
A {{domxref("MouseEvent")}}. Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}}.
28+
A {{domxref("UIEvent")}}. Inherits from {{domxref("Event")}}.
2829

29-
{{InheritanceDiagram("MouseEvent")}}
30+
{{InheritanceDiagram("UIEvent")}}
3031

31-
## Event properties
32+
## Examples
3233

33-
[...]
34+
This example listens for `DOMActivate` on a {{HtmlElement("button")}} element and displays its {{domxref("UIEvent/detail", "detail")}}.
3435

35-
## Examples
36+
### HTML
3637

3738
```html
38-
<svg
39-
xmlns="http://www.w3.org/2000/svg"
40-
version="1.2"
41-
baseProfile="tiny"
42-
xmlns:ev="http://www.w3.org/2001/xml-events"
43-
width="6cm"
44-
height="5cm"
45-
viewBox="0 0 600 500">
46-
<desc>Example: invoke an JavaScript function from a DOMActivate event</desc>
47-
48-
<!-- JavaScript to change the radius -->
49-
<script>
50-
<![CDATA[
51-
function change(evt) {
52-
const circle = evt.target;
53-
const currentRadius = circle.getFloatTrait("r");
54-
if (currentRadius === 100) {
55-
circle.setFloatTrait("r", currentRadius * 2);
56-
} else {
57-
circle.setFloatTrait("r", currentRadius * 0.5);
58-
}
59-
}
60-
]]>
61-
</script>
62-
63-
<!-- Act on each DOMActivate event -->
64-
<circle cx="300" cy="225" r="100" fill="red">
65-
<handler type="text/javascript" ev:event="DOMActivate">
66-
change(evt);
67-
</handler>
68-
</circle>
69-
70-
<text
71-
x="300"
72-
y="480"
73-
font-family="Verdana"
74-
font-size="35"
75-
text-anchor="middle">
76-
Activate the circle to change its size
77-
</text>
78-
</svg>
39+
<button>Click</button>
40+
```
41+
42+
### JavaScript
43+
44+
```js
45+
const button = document.querySelector("button");
46+
47+
button.addEventListener("DOMActivate", (event) => {
48+
button.textContent = `Click count: ${event.detail}`;
49+
});
7950
```
8051

81-
{{EmbedLiveSample("Examples", 640, 200)}}
52+
### Result
53+
54+
Note that `detail` of the `DOMActivate` event may have browser-specific behavior. It may either always be `0`, or have similar behavior as the {{domxref("Element/click_event", "click")}} event's `detail` (i.e., indicating the number of consecutive clicks).
55+
56+
{{EmbedLiveSample("Examples")}}
8257

8358
## Specifications
8459

@@ -90,7 +65,5 @@ A {{domxref("MouseEvent")}}. Inherits from {{domxref("UIEvent")}} and {{domxref(
9065

9166
## See also
9267

93-
- {{domxref("MouseEvent")}}
94-
- {{domxref("Element/mousedown_event", "mousedown")}}
95-
- {{domxref("Element/mouseup_event", "mouseup")}}
96-
- {{domxref("Element/mousemove_event", "mousemove")}}
68+
- {{domxref("UIEvent")}}
69+
- {{domxref("Element/click_event", "click")}}

0 commit comments

Comments
 (0)