Js基础14:事件绑定（事件绑定方法）

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);
 }