1、事件委托
事件委托：又叫事件代理，原理就是利用事件冒泡的特点：当子元素的事件发生时，父元素的同名事件也会发生——指定一个事件处理程序，就可以管理某一类型的所有事件。
优点：不用给列表的每一个元素绑定事件，只需要绑定父元素就可以处理所有子元素的事件，优化性能。
html和css代码
<ulid="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<p>路飞</p>
<span>卢本伟</span>
</ul>
JavaScript代码
//事件冒泡的应用（事件委托）
get_id('ul').onclick=function(e) {
//e.target：获取真正触发事件的那个元素
//console.log(e.target);
vartarget=e.target;
// 只操作li元素
if(target.nodeName=="LI") {
target.style.backgroundColor='#cfc';
}
}
2、DOM 2级事件
事件源.on事件=function(){要执行的处理程序;}
我们之前学习的事件绑定叫做DOM的0级事件，缺点是重复绑定会覆盖之前的事件，
而2级事件可以实现一种事件绑定多个事件处理函数，适合多人开发。
2级事件定义：将指定的监听器注册到 EventTarget（事件目标）上，当该对象触发指定的事件时，指定的回调函数就会被执行。说白了，就是2级事件可以将事件监听器注册到btn按钮上，当事件发生时，调用事件处理函数。
2.1、事件绑定：
又叫事件监听：使同一个事件源一次获多次触发事件函数
//谷歌和火狐支持,IE8不支持(掌握)
对象.addEventListener("事件类型",事件处理函数,false);
//谷歌不支持,火狐不支持,IE8支持（了解）
对象.attachEvent("on事件类型",事件处理函数);
代码示例：
<divid="dv">
<buttonid="btn">按钮</button>
</div>
//对象.addEventListener("事件类型",事件处理函数,false);
//参数1:事件的类型---事件的名字,没有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
//参数3:布尔类型,默认false-----指定事件是否在捕获（true ）或冒泡（false）阶段执行
//为同一个元素绑定多个相同的事件
get_id("btn").addEventListener("click",function() {
console.log("我是第一个点击事件");
},false);
//为同一个元素绑定多个相同的事件
get_id("btn").addEventListener("click",function() {
console.log("我是第二个点击事件");
},false);
//为同一个元素绑定多个相同的事件
get_id("btn").addEventListener("click",function() {
console.log("我是第三个点击事件");
},false);
//验证第三个参数
get_id("dv").addEventListener("click",function() {
console.log("我是div的点击事件");
},true);
如果想支持所有浏览器，则想办法解决兼容性问题即可，现在只需了解兼容性问题的解决，将来会使用框架，框架已经帮我们解决了浏览器兼容性问题。
2.2、事件解绑：
在开发中，如果想让按钮的事件处理函数只能执行一次，怎么办？如何移除元素的事件？
语法：
// 0级事件解绑：直接将dom.onclick = null；
// addEventListener对应的事件解绑(掌握)
对象.removeEventListener("事件类型",事件处理函数,false);
// attachEvent对应的事件解绑（了解）
对象.detachEvent("on事件类型",事件处理函数);
html和css代码
<buttonid="btn1">绑定事件</button>
<buttonid="btn2">解绑事件</button>
JavaScript代码
// get_id("btn1").addEventListener("click", function () {
// console.log("第一个");
// }, false);
// get_id("btn1").addEventListener("click", function () {
// console.log("第二个");
// }, false);
// //点击第二个按钮把第一个按钮的第一个点击事件解绑
// get_id("btn2").onclick = function () {
// get_id("btn1").removeEventListener("click", function () {
// console.log("第一个"); //这样就没解绑成功，因为是两个匿名函数，不是同一个函数
// }, false)
// }
//解绑事件的时候,需要在绑定事件的时候,使用命名函数，否则解绑的不是一个函数
functionf1() {
console.log("第一个");
}
functionf2() {
console.log("第二个");
}
get_id("btn1").addEventListener("click",f1,false);
get_id("btn1").addEventListener("click",f2,false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
get_id("btn2").onclick=function() {
get_id("btn1").removeEventListener("click",f1,false);
},
