1. Что такое комиссия по событиям: с точки зрения непрофессионала, события - Onclick, Onmouseover, Onmouseout и т. Д. и т. Д. - это события. Что касается делегирования, их просят сделать это. Это событие было первоначально добавлено к определенным элементам, но вы добавляете его к другим, чтобы сделать это для завершения события.
То есть: используйте принцип пузырьков, чтобы добавить события к родителю, чтобы вызвать эффект выполнения.
Преимущества: 1. Повышение производительности.
Мы можем взглянуть на пример: каждый LI должен быть запустил, чтобы изменить цвет своего фона.
<ul id = "ul"> <li> aaaaaaaaaa </li> <li> bbbbbbbb </li> <li> cccccccccc </li> </ul> window.onload = function () {var oul = document.getelementbyid ("ul"); var ali = oul.getelementsbytagname ("ul"); i <ali.length;Таким образом, мы можем добавить события мыши на LI.
Но если у нас может быть много для петель, это повлияет на производительность.
Ниже мы можем использовать делегирование событий для достижения этого эффекта. HTML остается неизменным
window.onload = function () {var oul = document.getElementById ("ul"); var ali = oul.getElementsbytagname ("li");/*Источник события следует использовать здесь: Объект события, источник события. Независимо от того, в каком событии он находится, пока элемент, который вы используете, является источником события. т.е. window.event.srcelement Стандарт: event.targetNodeName: найти имя метки элемента */oul.onmouseover = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.toloarcecase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodeName.tolowercase () == "li") {target.style.background = "";}}}Преимущества 2, вновь добавленные элементы также будут иметь предыдущие события.
Мы также придерживаемся этого примера, но нам нужно динамически добавить LI. Нажмите кнопку, чтобы добавить LI Динамически
нравиться:
<input type = "button" id = "btn"/> <ul id = "ul"> <li> aaaaaaaa </li> <li> bbbbbbbb </li> <li> cccccccccc </li> </ul>
Мы сделаем это без комиссии по мероприятиям:
window.onload = function () {var oul = document.getElementbyId ("ul"); var ali = oul.getElementsbytagname ("li"); var overt = document.getElementByid ("btn"); var inow = 4; для (var i = 0; i <ali.length; i ++) {ali [i]. = "red";} ali [i] .onmouseout = function () {this.style.background = "";}} octn.onclick = function () {inow ++; var oli = document.createElement ("li"); oli.innerhtml = 1111 *inow; oul.appendchild ("li");Делая это, мы видим, что нажмите кнопку, недавно добавленную LI на LI, без мышиного события, чтобы изменить цвет своего фона.
Потому что для цикла была выполнена при нажатии, чтобы добавить.
Затем мы делаем это, делегируя событие. Просто HTML остается неизменным
window.onload = function () {var oul = document.getElementById ("ul"); var ali = oul.getElementsbytagname ("li"); var overt = document.getElementByid ("btn"); var inow = 4; oul.onmouseover = function (ev) {var ev = ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.toloarcecase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodeName.tolowercase () == "li") {target.style.background = "";}} optn.onclick = function () {inow ++; var oli = document.createelement ("li"); *inow; oul.appendchild (oli);}}ХОРОШО:
Как и в наших сообщениях Weibo, на новом сообщении Weibo все еще существуют события мыши.
Вышеуказанное - это ввод в эксплуатацию и преимущества мероприятия в JavaScript, введенном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!