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>

Author: 3 people

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

@@ -14,71 +14,46 @@ The **`DOMActivate`** event is fired at an element when it becomes active, such
 
 ## Syntax
 
-Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}.
 
 ```js-nolint
 addEventListener("DOMActivate", (event) => { })
-
-onDOMActivate = (event) => { }
 ```
 
+> [!NOTE]
+> There is no `onDOMActivate` event handler property for this event.
+
 ## Event type
 
-A {{domxref("MouseEvent")}}. Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}}.
+A {{domxref("UIEvent")}}. Inherits from {{domxref("Event")}}.
 
-{{InheritanceDiagram("MouseEvent")}}
+{{InheritanceDiagram("UIEvent")}}
 
-## Event properties
+## Examples
 
-[...]
+This example listens for `DOMActivate` on a {{HtmlElement("button")}} element and displays its {{domxref("UIEvent/detail", "detail")}}.
 
-## Examples
+### HTML
 
 ```html
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  version="1.2"
-  baseProfile="tiny"
-  xmlns:ev="http://www.w3.org/2001/xml-events"
-  width="6cm"
-  height="5cm"
-  viewBox="0 0 600 500">
-  <desc>Example: invoke an JavaScript function from a DOMActivate event</desc>
-
-  <!-- JavaScript to change the radius -->
-  <script>
-    <![CDATA[
-    function change(evt) {
-      const circle = evt.target;
-      const currentRadius = circle.getFloatTrait("r");
-      if (currentRadius === 100) {
-        circle.setFloatTrait("r", currentRadius * 2);
-      } else {
-        circle.setFloatTrait("r", currentRadius * 0.5);
-      }
-    }
-    ]]>
-  </script>
-
-  <!-- Act on each DOMActivate event -->
-  <circle cx="300" cy="225" r="100" fill="red">
-    <handler type="text/javascript" ev:event="DOMActivate">
-      change(evt);
-    </handler>
-  </circle>
-
-  <text
-    x="300"
-    y="480"
-    font-family="Verdana"
-    font-size="35"
-    text-anchor="middle">
-    Activate the circle to change its size
-  </text>
-</svg>
+<button>Click</button>
+```
+
+### JavaScript
+
+```js
+const button = document.querySelector("button");
+
+button.addEventListener("DOMActivate", (event) => {
+  button.textContent = `Click count: ${event.detail}`;
+});
 ```
 
-{{EmbedLiveSample("Examples", 640, 200)}}
+### Result
+
+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).
+
+{{EmbedLiveSample("Examples")}}
 
 ## Specifications
 
@@ -90,7 +65,5 @@ A {{domxref("MouseEvent")}}. Inherits from {{domxref("UIEvent")}} and {{domxref(
 
 ## See also
 
-- {{domxref("MouseEvent")}}
-- {{domxref("Element/mousedown_event", "mousedown")}}
-- {{domxref("Element/mouseup_event", "mouseup")}}
-- {{domxref("Element/mousemove_event", "mousemove")}}
+- {{domxref("UIEvent")}}
+- {{domxref("Element/click_event", "click")}}