1、事件委托

事件委托：又叫事件代理，原理就是利用事件冒泡的特点：当子元素的事件发生时，父元素的同名事件也会发生——指定一个事件处理程序，就可以管理某一类型的所有事件。

优点：不用给列表的每一个元素绑定事件，只需要绑定父元素就可以处理所有子元素的事件，优化性能。

html和css代码

 <ul id="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);     var target = 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事件类型",事件处理函数);

代码示例：

 <div id="dv">     <button id="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代码

 <button id="btn1">绑定事件</button> <button id="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) // }  //解绑事件的时候,需要在绑定事件的时候,使用命名函数，否则解绑的不是一个函数 function f1() {     console.log("第一个"); } function f2() {     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); }