event.target

  • Revision slug: DOM/event.target
  • Revision title: event.target
  • Revision id: 78158
  • Created:
  • Creator: Hamstersoup
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{template.DomRef()}}

Summary

Returns a reference to the target to which the event was dispatched.

See also Comparison of Event Targets

Syntax

target = event.target
  • target is a reference to the EventTarget, to which the event was dispatched.

Example

<html>
<head>
<title>target example</title>

<script type="text/javascript">

function highlightTarget(evt) {
  evt.target.style.backgroundColor = 'blue';
}

function resetTarget(evt) {
  evt.target.style.backgroundColor = 'silver';
}

</script>
</head>

<body onmousedown="highlightTarget(event)" onmouseup="resetTarget(event)">

<p>This example demonstrates how, by using event propagation, two event
handler functions in the body element can use the <i>target</i> property
to distinguish between, and process, all other bubbleable events occuring
lower down the DOM. Note: not all events can bubble up the DOM.</p>

<p>As an event lower down the DOM bubbles up and reaches the body
object, the <i>target</i> property contains the object reference of the
original event target. In this case which element in the document
received an onmousedown or onmouseup event.</p>

<p>This allows the event handlers of the body object to process bubbleable
events occuring lower down the DOM structure, which means there is no need
to attach the event handlers to every button & para element of the page.</p>

<button>button 1</button><br />
<button>button 2</button><br />
<button>button 3</button><br />
<button>button 4</button><br />
<button>button 5</button><br />
<button>button 6</button><br />
<button>button 7</button><br />

</body>
</html>

Specification

DOM Level 2 Events: Event.target

{{ wiki.languages( { "pl": "pl/DOM/event.target" } ) }}

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns a reference to the target to which the event was dispatched.
</p><p>See also <a href="en/DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a>
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval"><i>target</i> = <i>event</i>.target
</pre>
<ul><li> <code>target</code> is a reference to the <code>EventTarget</code>, to which the event was dispatched.
</li></ul>
<h3 name="Example"> Example </h3>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;target example&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function highlightTarget(evt) {
  evt.target.style.backgroundColor = 'blue';
}

function resetTarget(evt) {
  evt.target.style.backgroundColor = 'silver';
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body onmousedown="highlightTarget(event)" onmouseup="resetTarget(event)"&gt;

&lt;p&gt;This example demonstrates how, by using event propagation, two event
handler functions in the body element can use the &lt;i&gt;target&lt;/i&gt; property
to distinguish between, and process, all other bubbleable events occuring
lower down the DOM. Note: not all events can bubble up the DOM.&lt;/p&gt;

&lt;p&gt;As an event lower down the DOM bubbles up and reaches the body
object, the &lt;i&gt;target&lt;/i&gt; property contains the object reference of the
original event target. In this case which element in the document
received an onmousedown or onmouseup event.&lt;/p&gt;

&lt;p&gt;This allows the event handlers of the body object to process bubbleable
events occuring lower down the DOM structure, which means there is no need
to attach the event handlers to every button &amp; para element of the page.&lt;/p&gt;

&lt;button&gt;button 1&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 2&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 3&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 4&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 5&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 6&lt;/button&gt;&lt;br /&gt;
&lt;button&gt;button 7&lt;/button&gt;&lt;br /&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Specification"> Specification </h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-target">DOM Level 2 Events: Event.target</a>
</p>{{ wiki.languages( { "pl": "pl/DOM/event.target" } ) }}
Revert to this revision