Говоря о событиях JavaScript, трудно избежать трех тем: пузырьков событий, захвата событий и блокирования событий по умолчанию, будь то интервью или в повседневной работе.
1. Пузыри события
Давайте посмотрим на кусок кода:
var $ input = document.getElementsbytagname ("input") [0]; var $ div = document.getElementsbytagname ("div") [0]; var $ body = document.getelementsbytagname ("body") [0]; $ input.onclick = function (e) {this.style.border = "5px vared var e = function (e) {style.border =" 5px var e = function (e) {style.border = "5px var e = function. window.e; Alert ("red")} $ div.onclick = function (e) {this.style.border = "5px solid green" alert ("green")} $ body.onclick = function (e) {this.style.border = "5px твердое желтое" Alert ("желтый")}HTML -код
<div> <input type = "button" value = "Пузыри тестового события" /> < /div> "красный", "зеленый", "желтый" всплывает по очереди.
Ваше исходное намерение - запустить элемент кнопки, но он запускается вместе с событием, связанным с родительским элементом. Это пузырь событий.
Если привязка события с вводом изменяется на:
$ input.onclick = function (e) {this.style.border = "5px твердый красный" var e = e || window.e; Alert ("red") e.stoppropagation ();}В настоящее время появится только «красный», потому что он предотвращает пузырьковое событие.
2. Захват события
Поскольку существует пузырька событий, может быть захват событий, что является обратным процессом. Разница от верхнего элемента до целевого элемента или от целевого элемента до верхнего элемента.
Посмотрим на кусок кода:
$ input.addeventListener ("click", function () {this.style.border = "5px solid red"; alert ("red")}, true) $ div.addeventlistener ("click", function () {this.style.border = "5px solid green"; alert ("green")}, true). this.style.border = "5px твердый желтый";В это время «желтый», «зеленый», «красный» появляется один за другим, что является захватом события.
3. заблокировать событие по умолчанию
Есть некоторые поведения по умолчанию элементов HTML, таких как тег A, и после нажатия будет действие прыжков; Ввод типа отправки в форме формы имеет событие прыжка с отправкой по умолчанию; Ввод типа сброса имеет поведение сброса. Если вы хотите заблокировать это поведение по умолчанию браузера, JavaScript предоставляет вам метод.
var $ a = document.getElementsbytagname ("a") [0]; $ a.onclick = function (e) {alert ("Действие прыжков было заблокировано мной") e.preventDefault (); // вернуть false; // Также возможно} <a href = "http://keleyi.com"> ke leyi </a> Событие по умолчанию исчезло.Поскольку возврат false и e.preventdefault () имеет такой же эффект, есть ли различия? Конечно есть.
Поведение хостов событий по умолчанию может быть организовано только в атрибутах HTML Event и методах обработки событий на уровне DOM0.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.