This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Сравнение разных Event Targets
Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.
Существуют 5 целей для рассмотрения:
Примеры
html
<!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> Изначальная цель, отправляющая событие <small>event.target</small> </td> <td> Цель, кто обрабатывает события <small>event.currentTarget</small> </td> <td> Идентифицировать другой элемент (если он есть), участвующий в событии <small>event.relatedTarget</small> </td> <td> Если по какой-то причине произошло перенацеливание события <small>event.explicitOriginalTarget</small> содержит цель перед перенацеливанием (никогда не содержит анонимных целей) </td> <td> Если по какой-то причине произошло перенацеливание события <small>event.originalTarget</small> содержит цель перед перенацеливанием (может содержать анонимные цели) </td> </tr> </thead> <tr> <td></td> <td></td> <td></td> <td></td> <td></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>