性能优化之事件委托

在介绍事件委托之前先介绍事件流。
事件流描述的是从页面中接受事件的顺序，但IE和Netscape开发团队有了差不多完全相反的事件流概念。
IE的事件流是事件冒泡，即事件最开始时最具体的元素接受，然后逐级向上传播到较为不具体的节点，节选书中的图例子

Netscape的事件流是事件捕获，即事件最开始时不具体的元素接受，然后逐级向下传播到具体的节点，节选书中的图例子

然后看一下事件委托实例

   <ul id="list"> </ul>

在项目中会遍历数据，当点击时获取一些值，可以直接在遍历的时候对每个dom结构进行事件注册，如下

<script>
var html='';
for(let i=0;i<3;i++){
html+=`<li οnclick="find(${i+1})">这是第${i+1}行</li>`   //此处用es6模板字符串
}
$('#list').append(html)
function find(){
    var e=arguments[0]   //此处获取第一个参数
    console.log('点击的参数是'+e)
}
</script>

如果我们采用事件委托（利用事件冒泡）的方式实现，如下

var html='';
for(let i=0;i<3;i++){
html+=`<li id="${i+1}">这是第${i+1}行</li>`
}
$('#list').append(html)
$('#list').click(function(){
    if(event.target.nodeName=='LI'){   //这里多一步判断dom节点类型
        console.log('点击的参数是'+event.target.id)  //通过event的target获取一些信息
    }
})

操作结果都一样

事件委托的好处：

1. 只绑定一次事件，在内存中开辟了一块空间（绑定的事件函数其实是一个闭包，在删除节点时也要解除绑定事件），节省资源同时减少了dom操作，提高性能。
2. 对于新添加的元素也会有之前的事件。