事件委托，其实之前有用过，但是就是百度了一下，并不了解它的优点到低好在哪里。今天突发奇想就了解了一下。
那下来总结一下吧。
- 什么是事件委托？
事件委托，也叫事件代理。利用了事件冒泡，可以用一个事件处理方法，管理处理一类事件。 - 事件委托的好处？
比如我们要给所有的li设置相同的onclick事件，首先想到的就是用for循环遍历了吧，但是每一次遍历就会进行一次dom操作。而添加到页面上的事件数量将直接关系到页面的整体运行性能，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间。所以事件委托的好处就在于大大减少了dom操作的次数，提高性能。 - 事件委托原理
利用事件冒泡原理，就是从事件最深的节点开始，逐步向上传播事件。
eg:div > ul > li > a想要给a加一个点击事件时，它的执行顺序就是
a> li >ul > div,给里面的元素a,li,ul添加事件时，最后都会冒泡到最外层的div上，所以都会触发，委托它们的父级代替它们执行。 - 事件委托怎么写？
Event对象提供了一个属性叫target，可以返回事件的目标节点，称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，所以还要用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写（toLowerCase（））再做比较
兼容性写法:
function (event) {
let ev = event || window.event;
let target = ev.target || ev.srcElement;
}
下面看例子吧：
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
要给上述的每个li一个点击事件，显示字符串123。
- 基础方法：需要遍历这个li的对象集合，然后给每个li绑定点击事件
window.onload = function(){
const ul= document.getElementById("ul");
const li = ul.getElementsByTagName('li');
for(let i=0; i<aLi.length; i++){
li[i].onclick = function(){
console.log(123);
}
}
}
- 父级ul做事件处理，触发点击事件（但不是点击每个结点触发的事件）
window.onload = function () {
const ul = document.getElementById("ul");
ul.onclick = function () {
alert("1234");
}
}
- 事件委托，给父级绑定事件，但当点击每个结点时才触发事件
window.onload = function () {
const ul = document.getElementById("ul");
ul.onclick = function (event) {
let target = event.target;
if(target.nodeName.toLowerCase() === 'li'){
console.log("1234");
console.log(target.innerHTML);
}
}
}
上面的例子应该很清晰的可以看出事件委托的优点了，减少了遍历和dom操作的次数。
对于不同的dom操作如何用事件委托呢？下面再来看个例子，更加深的体会一下吧。
<div id="box">
<input type="button" value="添加" id="add">
<input type="button" value="删除" id="remove">
<input type="button" value="选择" id="chose">
<input type="button" value="移动" id="move">
</div>
要实现点击对应的按钮，显示他要执行的操作。
- 基本方法: 给每个按钮都绑定相应的点击事件
var add = document.getElementById("add");
var remove = document.getElementById("remove");
var move = document.getElementById("move");
var chose = document.getElementById("chose");
add.onclick = function(){
alert('添加');
};
remove.onclick = function(){
alert('删除');
};
move.onclick = function(){
alert('移动');
};
chose.onclick = function(){
alert('选择');
}
}
- 事件委托:给父级元素绑定点击事件，点击不同的按钮，通过选择，触发事件
window.onload = function () {
const box = document.getElementById("box");
box.onclick = function (event) {
let target = event.target;
switch (target.id.toLowerCase()) {
case 'add':
console.log('添加');
break;
case 'remove':
console.log('删除');
break;
case 'chose':
console.log('选择');
break;
case 'move':
console.log("移动");
break;
}
}
}
通过这个例子就更清晰的看出事件委托，减少了绑定事件的dom操作。
emmm..下面这个例子就是创建新节点，并给新节点绑定相同的事件
<input type="button" value="添加" id="add">
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
要求鼠标放上去为红色，离开为黄色，添加新节点，也要有这些事件
- 基本方法：对每一个
li标签进行遍历操作，注意要想新节点要有这些事件，得将原有的事件封装成一个方法，创建新节点后，调用此方法。
window.onload = function () {
const ul = document.getElementById("ul");
const li = document.getElementsByTagName('li');
const btn = document.getElementById("add");
function addNew() {
for(let i = 0;i<li.length;i++){
li[i].onmouseover = function () {
this.style.backgroundColor = 'red';
};
li[i].onmouseout = function () {
this.style.backgroundColor ='yellow';
}
}
}
btn.onclick = function () {
let one = document.createElement('li');
one.innerText = '555';
ul.appendChild(one);
addNew();
};
}
- 事件委托：给父元素绑定事件，点击子元素触发事件，新产生的节点，也可以拥有相同的事件，不需要别的操作
window.onload = function () {
const ul = document.getElementById("ul");
const li = document.getElementsByTagName('li');
const btn = document.getElementById("add");
ul.onmouseover = function (event) {
let target = event.target;
if(target.nodeName.toLowerCase() === 'li')
target.style.backgroundColor = 'red';
};
ul.onmouseout= function (event) {
let target = event.target
if(target.nodeName.toLowerCase() === 'li')
target.style.backgroundColor = 'yellow';
};
btn.onclick = function () {
let one = document.createElement('li');
one.innerText = '555';
ul.appendChild(one);
};
};
写了这么多例子，应该很清晰了。
事件委托其实并不是所有的事件都适合用。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
但是其中mouseover和mouseout都有位置计算问题，所以也不建议使用。
可以参考：js事件委托或事件代理详解
