Зачем вам addeventListener?
Давайте посмотрим на клип:
HTML -код
<div id = "box"> Погоня за мечтами </div>
Код с включением
window.onload = function () {var box = document.getElementbyid ("box"); box.onclick = function () {console.log ("I Am Am Box1"); } box.onclick = function () {box.style.fontsize = "18px"; console.log ("I Am Box2"); }} Результат работы: "Я - Box2"Я видел это, второй онклик перезаписывает первый Onclick. Хотя в большинстве случаев мы можем использовать для достижения желаемых результатов, иногда нам нужно выполнить несколько идентичных событий. Очевидно, что если мы не можем использовать, чтобы завершить то, что мы хотим, то нет необходимости догадываться. Вы должны знать, верно! AddEventListener может связать одно и то же событие несколько раз и не будет перезаписать предыдущее событие.
Код с AddEventListener
window.onload = function () {var box = document.getElementbyid ("box"); Box.addeventListener ("click", function () {console.log ("i Am Am Box1");}) Box.AddeventListener ("click", function () {console.log ("I Ame Box2");})} Результат: I Am Ama Ama Ama Box2Первый параметр метода addeventListenert заполняется в имени события. Обратите внимание, что вам не нужно писать. Второй параметр может быть функцией. Третий параметр относится к процессу обработчика событий на стадии пузыря или стадии захвата. Если True представляет обработку стадии захвата, если False представляет обработку стадии пузырька, третий параметр может быть опущен. В большинстве случаев третий параметр не должен использоваться. Если третий параметр не записан, false по умолчанию является false.
Использование третьего параметра
Иногда это так
<тело>
<div id = "box">
<div id = "ребенок"> </div>
</div>
</body>
Если я добавлю событие Click в поле, нет проблем, если я нажимаю напрямую, но если я щелкну по детске элементу, как он это сделает? (Заказ на выполнение)
Box.addeventListener ("click", function () {console.log ("box");}) child.addeventListener ("click", function () {console.log ("child");})То есть событие по умолчанию выполняется в том порядке, в каком событии пузырится.
Если третий параметр записан как истинный, он будет выполнен в порядке выполнения захвата событий.
Box.AddeventListener ("click", function () {console.log ("box");}, true) child.addeventListener ("click", function () {console.log ("Child");}) Результат выполнения: box childПроцесс выполнения пузырьков событий:
Начните пузыриться вверх от самого конкретного элемента (элемент, на который вы нажали). Взять наш случай выше, и порядок его: Child-> Box
Процесс выполнения событий:
Начните пузыриться в внутреннюю часть из наименее конкретного элемента (коробка на самой внешней). Взять наш случай выше, и заказ: box-> ребенок
Приведенная выше статья полностью понимает разницу между addeventListener и ON - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.