JavaScript事件绑定

Posted 2020-08-15 y丶卿

浏览器事件概述

　　技术一般水平有限，有什么错的地方，望大家指正。

　　当我们在浏览网页的时候，浏览器可以在视觉上为我们展示出页面还可以在行为上响应用户的操作，浏览器响应用户的操作就是通过事件来完成的，浏览器提供了事件注册接口和事件监听接口这样浏览器就可以接收用户的行为并且进行处理了。浏览器已经提供很多的事件包括页面加载、鼠标事件以及键盘事件等，我们只需要定义好事件处理函数即可，当用户的操作触发这些事件时就会执行我们预先定义好的处理函数。一个行为的完整过程如下：

　　浏览器在交互的过程中基本的功能就是通过事件+AJAX来完成的，浏览器通过事件来响应用户的行为，如果是有关数据的操作在通过AJAX来与服务器完成交互。

事件的基本使用

　　首先事件有三种不同的绑定方式，分别为在DOM元素中直接绑定、在javascript中绑定，绑定事件监听函数。

　　在DOM元素中直接绑定形式如下：

<button id="demo" onclick="test(\'test\')">button</div>

　　在一般情况下这可以说是最不好的一种绑定方法了，首先表现层和行为层耦合在一起，对于后期的维护带来了极大的不便，其次必须使用全局函数，我们都知道要尽可能的减少全局变量的声明，而且这种绑定方式是可以被覆盖的，如果我们在JS中在为该元素绑定一个点击处理函数，那么在DOM元素中绑定的事件处理函数都不会执行。

function test(){
  console.log("DOM");
}
window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
}
//只打印JS

　　在JavaScript中绑定形式如下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
}

　　这种绑定方式的缺点在于只能注册一个监听函数，后面的监听函数会覆盖前面的监听函数假如我们有如下的代码：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.onclick = function(){
      console.log("JS");
  }
  demo.onclick = function(){
      console.log("change");
  }
}
//打印change

　　绑定事件监听函数形式如下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.addEventListener("click",function(){console.log("handler1")},false);
  demo.addEventListener("click",function(){console.log("handler2")},false);
}
//打印handler1 handler2

　　这种绑定方法可以满足我们的要求,表现层行为层分离，一个事件可以绑定多个处理函数，除了兼容方面的问题好像就没什么问题了，兼容问题后面再介绍首先看一下addEventListener的用法。

　　addEventListener接收三个参数，第一个参数表示事件名称，第二个参数表示事件处理函数，第三个参数表示事件是捕获或冒泡。

　　第一个参数表示事件名称在使用时就是"click"、"mousemove"不要带有on,第二个参数表示事件的处理函数，一般称为回调函数，可以是一个匿名函数表达式或者函数名称，第三个参数是一个布尔值为true时表示事件捕获为false表示事件冒泡，一般第三个参数我们都设置为false,因为在IE浏览器下只支持事件冒泡。

addEventListener兼容问题处理

　　在非IE浏览器中addEventListener是可以正常使用的在IE9及以上的版本中也是可以使用的，IE提供了一个相同功能的API就是attachEvent来保证在IE8及以下可以正常使用。attachEvent接收两个参数第一个参数表示事件名称需要加上on比如"onclick"、"onmousemove"，第二个参数表示事件处理函数可以是一个匿名函数表达式或者函数名称，基本使用方式如下：

window.onload = function(){
  var demo = document.getElementById("demo");
  demo.attachEvent("onclick",function(){console.log("handler1")});
  demo.attachEvent("onclick",function(){console.log("handler2")});
}

　　所以在绑定事件时要同时考虑这两种情况，我们可以自行封装一个事件绑定函数（ele:DOM对象，e:事件名称，callback:事件处理函数）：

window.onload = function(){
    var demo = document.getElementById("demo");
    addEvent(demo,"click",function(){console.log("兼容测试")});
    function addEvent(ele,e,callback){
        ele.addEventListener?ele.addEventListener(e,callback,false):ele.attachEvent("on"+e,callback);
    }
}

　　也可扩展Element的原型函数：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",function(){console.log("handler test")},false);
}
Element.prototype.addEventListener = Element.prototype.addEventListener || function(e,cb){
    this.attachEvent("on"+e,cb)
}

取消事件绑定

　　如果我们绑定事件函数之后想取消事件函数的绑定，实现起来也很简单，如果我们使用的是JavaScript的事件绑定方式，直接给事件处理函数设置为null即可：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.onclick = function(){
        console.log("11111")
    }
    demo.onclick = null;
}

　　如果我们使用事件监听函数绑定的事件可以调用取消绑定的API每一种绑定方式都有它对应的解绑方式：

　　addEventListener绑定的监听函数用removeEventListener来解除绑定，该函数接同样收三个参数第一个参数表示事件名称，第二个参数表示事件函数的名称，第三个参数是一个布尔值表示冒泡阶段或者捕获阶段。如果绑定事件函数时第二个参数是一个匿名函数表达式的话是不能解除绑定的，只有第二参数是一个以声明的函数的名称才可以使用removeEventListener来解除绑定。下面的这段代码的事件处理函数是不能解除绑定的：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",function(){console.log("aaaa")},false);
}

　　要想移除事件处理函数必须使用函数声明：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEventListener("click",handler,false);
    demo.removeEventListener("click",handler);
    function handler(){
        console.log("aaaa");
    }
}

　　attachEvent绑定的监听函数要使用detachEvent来解除绑定使用方式和addEventListener基本一致，不同点就是IE浏览器只支持事件冒泡所以省略了第三个参数，事件名称要加上on使用方式为：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.attachEvent("onclick",handler);
    demo.detachEvent("onclick",handler);
    function handler(){
        console.log("aaaa");
    }
}

访问事件对象

　　在事件处理函数中，存在一个对象记录着事件的各种信息，这个对象只存在于事件函数执行的过程中，我们可以在事件处理函数中使用一个参数来代理事件对象，在非IE浏览器中我们可以直接使用参数作为事件对象，在IE浏览器中我们需要使用window.event来获取事件对象，使用方式如下：

window.onload = function(){
    var demo = document.getElementById("demo");
    demo.onclick = function(e){//事件处理函数是由浏览器来调用的，在调用时会把事件对象作为参数传递给事件处理函数
        var e = e || window.event;
        console.log(e);
    }
}

　　我们在事件处理函数中如果需要阻止默认事件和停止冒泡就需要用到事件对象。

　　在非IE浏览器中：

e.preventDefault();//阻止默认行为
e.stopPropagation();//停止冒泡

　　在IE浏览器中：

e.returnValue = false;//阻止默认行为
e.cancelBubble = true;//停止冒泡