В этой статье описывается использование делегирования событий JavaScript. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
1. Нажмите на любую часть страницы, чтобы запустить событие
Создайте файл script1.js.
Скопируйте код следующим образом: (function () {
EventUtility.Addevent (Document, "Click", Function (evt) {
оповещение («Привет»);
});
} ());
Раздел страницы.
Скопируйте код следующим образом: <Head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<тело>
<script src = "Eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
</html>
Результат вывода: нажатие на любую из страниц появится.
Однако иногда мы хотим нажать на элемент в документе, чтобы запустить событие.
2. Используйте делегат для запуска событий
Добавьте тег на страницу.
Скопируйте код следующим образом: <Head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<тело>
<div>
<p> <a href = "#"> Нажмите меня </a> </p>
</div>
<script src = "Eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
Изменить script1.js на:
Скопируйте код следующим образом: (function () {
EventUtility.Addevent (Document, "Click", Function (evt) {
// Получить объект Click
var target = EventUtility.getTarget (evt);
// Получить имя тега объекта Click
var tagname = target.tagname;
// Если тег
if (tagname === "a") {
оповещение («Нажмите меня»);
// заблокировать поведение по умолчанию ссылок
EventUtility.preventDefault (EVT);
}
});
} ());
Результат вывода: поле будет всплыть только в том случае, если вы нажмете тег A на странице.
Вышеуказанные преимущества: независимо от того, сколько элементов метки добавляются в документ, все теги имеют возможность запустить. Это ввод в эксплуатацию мероприятия. Мы хотим зарегистрировать события для детских элементов, но сначала зарегистрируем события с родительским элементом дочернего элемента. Таким образом, любой элемент, который динамически добавляется и того же типа, что и дочерний элемент, будет зарегистрирован в родительском элементе.
Если мы зарегистрируем события в детские элементы и динамически добавляем элементы того же типа, что и детские элементы в документе, мы должны зарегистрировать события для этих дочерних элементов, которые только что были добавлены динамически.
Кроме того, делегирование событий хорошо использует «пузыри событий». Нажав на дочерний элемент, согласно «пузырьку событий», родительский элемент детского элемента отражает событие Click и запускает свой собственный метод.
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.