事件委托,使用事件委托的好处是什么?举个简单的例子?
事件委托
事件委托就是利用事件冒泡机制指定一个事件处理程序,来管理某一类型的所有事件。
即:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处:
1. 只在内存中开辟了一块空间,节省资源同时减少了dom操作,提高性能
2. 对于新添加的元素也会有之前的事件
例子:ul中触发每个li来改变他们的背景颜色
HTML:
<ul id='ul'>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
<button id='button'>添加元素</button>
JavaScript:
window.onload = function(){
let oUl = document.getElementById('ul');
let aLi = oUl.getElementsByTagName('li');
let but = document.getElementById('button');
let now = 3;
// 事件源:event对象,不管在哪个事件中,只要你操作的哪个元素就是事件源
// ie:window.event.srcElement
// 标准:event.target
oUl.onmouseover = function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
oUl.onmouseout = function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
}
but.onclick = function(){
now ++;
let newLi = document.createElement('li');
newLi.innerHTML = 111111 * now;
oUl.appendChild(newLi);
}
}
事件委托
事件委托就是利用事件冒泡机制指定一个事件处理程序,来管理某一类型的所有事件。
即:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处:
1. 只在内存中开辟了一块空间,节省资源同时减少了dom操作,提高性能
2. 对于新添加的元素也会有之前的事件
例子:ul中触发每个li来改变他们的背景颜色
HTML:
<ul id='ul'>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
<button id='button'>添加元素</button>
JavaScript:
window.onload = function(){
let oUl = document.getElementById('ul');
let aLi = oUl.getElementsByTagName('li');
let but = document.getElementById('button');
let now = 3;
// 事件源:event对象,不管在哪个事件中,只要你操作的哪个元素就是事件源
// ie:window.event.srcElement
// 标准:event.target
oUl.onmouseover = function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
oUl.onmouseout = function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
}
but.onclick = function(){
now ++;
let newLi = document.createElement('li');
newLi.innerHTML = 111111 * now;
oUl.appendChild(newLi);
}
}