--- title: 'Element: DOMActivate event' slug: Web/API/Element/DOMActivate_event tags: - API - 事件 - 参考 translation_of: Web/API/Element/DOMActivate_event original_slug: Web/API/Element/Activate_event --- <p>{{APIRef}}</p> <p>{{Deprecated_Header}}</p> <p>当元素被激活时发生,例如点击鼠标或键盘按键。</p> <p>当元素被激活,如使用鼠标点击或使用键盘导航并激活至这个元素时, <code><strong>DOMActivate</strong></code> 事件被触发。</p> <table class="properties"> <tbody> <tr> <th scope="row"> <p class="syntaxbox">Bubbles</p> </th> <td> <p class="syntaxbox">Yes</p> </td> </tr> <tr> <th scope="row"> <p class="syntaxbox">Cancelable</p> </th> <td> <p class="syntaxbox">Yes</p> </td> </tr> <tr> <th scope="row"> <p class="syntaxbox">Interface</p> </th> <td> <p>{{domxref("MouseEvent")}}</p> </td> </tr> </tbody> </table> <h2 id="示例">示例</h2> <pre><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 ECMAScript function from a DOMActivate event</desc> <!-- ECMAScript to change the radius --> <script type="application/ecmascript"><![CDATA[ function change(evt) { var circle = evt.target; var 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="application/ecmascript" 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> </pre> <h2 id="规范">规范</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('UI Events', '#event-type-DOMActivate', 'DOMActivate')}}</td> <td>{{Spec2('UI Events')}}</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("api.Element.DOMActivate_event")}}</p> <h2 id="参见">参见</h2> <ul> <li>{{domxref("MouseEvent")}}</li> <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> </ul>