diff options
Diffstat (limited to 'files/ru/web/api/event/comparison_of_event_targets/index.html')
| -rw-r--r-- | files/ru/web/api/event/comparison_of_event_targets/index.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.html b/files/ru/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..0c05e9118f --- /dev/null +++ b/files/ru/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,164 @@ +--- +title: Сравнение разных Event Targets +slug: Web/API/Event/Comparison_of_Event_Targets +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Event_targets" name="Event_targets">Event targets</h3> + +<p>Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.</p> + +<p>Существуют 5 целей для рассмотрения:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Defined in</th> + <th>Purpose</th> + </tr> + <tr> + <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td> + <p>Элемент DOM слева от вызова этого события, например:</p> + + <pre class="eval"> +<em>element</em>.dispatchEvent(<em>event</em>) +</pre> + </td> + </tr> + <tr> + <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td> + <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a>, чьи <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> в настоящее время обрабатываются. По мере того, как происходит захват и всплытие событий, это значение изменяется.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> + <td>Определяет вторичную цель для события.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> + <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> + <td>{{ Non-standard_inline() }} Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ({{Bug ("185889")}}), и в этом случае <code>.target</code> покажет на родителя и <code>.explicitOriginalTarget</code> покажет на текстовый узел.<br> + В отличие от <code>.originalTarget</code> — <code>.explicitOriginalTarget</code> никогда не будет содержать анонимный контент.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td> + <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> + <td>{{ Non-standard_inline() }} Первоначальная цель события перед любым перенацеливанием. Подробнее см. <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Анонимный контент#Event_Flow_and_Targeting</a>.</td> + </tr> + </tbody> +</table> + +<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Использование <code>explicitOriginalTarget</code> и <code>originalTarget</code></h3> + +<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p> + +<h3 id="Examples" name="Examples">Примеры</h3> + +<pre><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> +</head> +<body> + <table> + <thead> + <tr> + <td class="standard">Изначальная цель, отправляющая событие <small>event.target</small></td> + <td class="standard">Цель, кто прослушивает события <small>event.currentTarget</small></td> + <td class="standard">Идентифицировать другой элемент (если он есть), участвующий в событии <small>event.relatedTarget</small></td> + <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.explicitOriginalTarget</small> содержит цель перед перенацеливанием (никогда не содержит анонимных целей)</td> + <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.originalTarget</small> содержит цель перед перенацеливанием (может содержать анонимные цели)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> +</table> +<p>Нажав на текст, вы увидите разницу между explicitOriginalTarget, originalTarget и target</p> +<script> + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); +</script> +</body> +</html></pre> + +<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Использование <code>target</code> и <code>relatedTarget</code></h3> + +<p>Свойство <code>relatedTarget</code> для события <code>mouseover</code> содержит узел, над которым ранее была указана мышь. Для события <code>mouseout</code> он удерживает узел, к которому движется мышь.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Тип события</th> + <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th> + <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th> + </tr> + <tr> + <td><code>mouseover</code></td> + <td>EventTarget, в который входим указателем</td> + <td>EventTarget, из которого выходим указателем</td> + </tr> + <tr> + <td><code>mouseout</code></td> + <td>EventTarget, из которого выходим указателем</td> + <td>EventTarget, в который входим указателем</td> + </tr> + </tbody> +</table> + +<p>TODO: Также требуется описание событий <code>dragenter</code> и <code>dragexit</code>.</p> + +<h4 id="Example" name="Example">Пример</h4> + +<pre class="eval"><hbox id="outer"> + <hbox id="inner" + onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');" + onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');" + style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> +</hbox> +</pre> + +<p> </p> |