В операции JavaScript DOM вы обязательно столкнетесь с JS -событиями. Наиболее распространенным является всплывающее событие DIV, как показано на рисунке
Нажав на серую часть, всплывающее окно исчезает, и нажатие на черную часть не имеет никакого эффекта.
Используйте следующий код для анализа пузырящего события JS
HTML -код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<Title> JS Bubbling Event </title>
<link rel = "styleSheet" href = "style.css">
</head>
<тело>
<div>
<h1> Анализ событий пузыря JS </h1>
<hr>
<div>
<Кнопка>
Нажмите меня!
</button>
</div>
</div>
<Скрипт>
var box = document.queryselector (". Box"),
btn = document.queryselector (". Btn");
box.onclick = function (event) {
оповещение ("I Am Div");
}
btn.onclick = function (event) {
оповещение («Я кнопка»);
}
</script>
</body>
</html>
Используя инструмент разработчика по умолчанию браузера Firefox, 3D -представление может четко увидеть порядок слоя Div
Иллюстрация:
Нажав кнопку, появится кнопка «Я - кнопка», и появится «Я есть диви», потому что событие кнопки будет запустить сначала, а затем будет запускается следующий слой Div Click Event.
Запуск событий является первым принципом в первую очередь.
Иллюстрация:
Тогда иногда мы не хотим, чтобы несколько событий вызывали конфликты, поэтому у события есть Stoppropagation (); Метод для предотвращения пузырьков.
Существует также метод события, который также обычно используется, например, ссылка. Когда я нажимаю на ссылку, я не хочу прыгать, поэтому я использую событие. PreventDefault (); метод
Пример кода заключается в следующем
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<Title> JS Bubbling Event </title>
<link rel = "styleSheet" href = "style.css">
</head>
<тело>
<div>
<h1> Анализ событий пузыря JS </h1>
<hr>
<div>
<Кнопка>
Нажмите меня!
</button>
<a href = "http://www.liteng.org" id = "link"> я - ссылка </a>
</div>
</div>
<Скрипт>
var box = document.queryselector (". Box"),
btn = document.queryselector (". Btn");
box.onclick = function (event) {
оповещение ("I Am Div");
}
btn.onclick = function (event) {
оповещение («Я кнопка»);
event.stoppropagation ();
}
document.getElementById ('link'). OnClick = function (event) {
оповещение («Я ссылка»);
Event.preventDefault ();
}
/*Различать event.stoppropagation (); и event.preventdefault ();
Первый использует метод StopPropagation () для предотвращения пузырьков событий.
Последнее - блокировать поведение по умолчанию, такое как блокировка гиперссылок
*/
</script>
</body>
</html>
Можете ли вы полностью понять пузырьковый инцидент JS? Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение