diff options
Diffstat (limited to 'files/id/web/api/event/target/index.html')
-rw-r--r-- | files/id/web/api/event/target/index.html | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/files/id/web/api/event/target/index.html b/files/id/web/api/event/target/index.html deleted file mode 100644 index 52397c0827..0000000000 --- a/files/id/web/api/event/target/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -translation_of: Web/API/Event/target ---- -<div>{{ApiRef("DOM")}}</div> - -<p>The <code><strong>target</strong></code> property of the {{domxref("Event")}} interface is a reference to the object onto which the event was dispatched. It is different from {{domxref("Event.currentTarget")}} when the event handler is called during the bubbling or capturing phase of the event.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var <em>theTarget</em> = <em>event</em>.target;</pre> - -<h3 id="Value">Value</h3> - -<p>{{domxref("EventTarget")}}</p> - -<h2 id="Example">Example</h2> - -<p>Properti <code>event.target</code> dapat digunakan untuk mengimplementasikan <strong>event delegation</strong>.</p> - -<pre class="brush: js">// Membuat sebuah list -var ul = document.createElement('ul'); -document.body.appendChild(ul); - -var li1 = document.createElement('li'); -var li2 = document.createElement('li'); -ul.appendChild(li1); -ul.appendChild(li2); - -function hide(e){ - // e.target refers to the clicked <li> element - // This is different than e.currentTarget which would refer to the parent <ul> in this context - e.target.style.visibility = 'hidden'; -} - -// Attach the listener to the list -// It will fire when each <li> is clicked -ul.addEventListener('click', hide, false); -</pre> - -<h2 id="Spesifikasi">Spesifikasi</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Event.target")}}</p> - -<h3 id="Compatibility_notes">Compatibility notes</h3> - -<p>On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent()')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the <code>target</code> property, and it has the same semantics as <code>Event.target</code>.</p> - -<pre class="brush: js">function hide(e) { - // Support IE6-8 - var target = e.target || e.srcElement; - target.style.visibility = 'hidden'; -} -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> -</ul> |