Revision 1047416 of Activate

Revision slug: Web/Events/Activate
Revision title: Activate
Revision id: 1047416
Created: Apr 26, 2016, 11:38:18 AM
Creator: rolfedh
Is current revision? Yes
Comment Editorial review. Please consider adding tags. No other changes required.

Revision Content

Occurs when an element is activated, for instance, through a mouse click or a keypress.

General info

Specification DOM L3
Interface {{domxref("MouseEvent")}}
Bubbles Yes
Cancelable Yes
Target Element
Default Action Varies

Properties

Example

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="https://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="https://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>

Browser compatibility

Revision Source

<p>Occurs when an element is activated, for instance, through a mouse click or a keypress.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt>&nbsp; &nbsp; &nbsp; &nbsp; Specification &nbsp; &nbsp;&nbsp;<a href="https://www.w3.org/TR/SVGTiny12/interact.html#ActivateEvent">DOM L3</a></dt>
 <dt>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Interface &nbsp; &nbsp;&nbsp;{{domxref("MouseEvent")}}</dt>
 <dt>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Bubbles &nbsp; &nbsp; Yes&nbsp;</dt>
 <dt>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Cancelable &nbsp; &nbsp; &nbsp;Yes</dt>
 <dt>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Target &nbsp; &nbsp; &nbsp;&nbsp;Element</dt>
 <dt>&nbsp; &nbsp;Default Action &nbsp; &nbsp; &nbsp; &nbsp;Varies</dt>
</dl>

<h2 id="Properties">Properties</h2>

<p>&nbsp;</p>

<h2 id="Example">Example</h2>

<pre>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="https://www.w3.org/2001/xml-events"
     width="6cm" height="5cm" viewBox="0 0 600 500"&gt;

  &lt;desc&gt;Example: invoke an ECMAScript function from a DOMActivate event&lt;/desc&gt;

  &lt;!-- ECMAScript to change the radius --&gt;
  &lt;script type="application/ecmascript"&gt;&lt;![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);
    }
  ]]&gt;&lt;/script&gt;

  &lt;!-- Act on each DOMActivate event --&gt;
  &lt;circle cx="300" cy="225" r="100" fill="red"&gt;
    &lt;handler type="application/ecmascript" ev:event="DOMActivate"&gt; change(evt); &lt;/handler&gt;
  &lt;/circle&gt;

  &lt;text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"&gt;
    Activate the circle to change its size
  &lt;/text&gt;
&lt;/svg&gt;
</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<p>&nbsp;</p>

Revert to this revision