JavaScript事件触发机制

浏览器端的事件触发

事件是浏览器中最为核心的机制，几乎所有功能触发的前提条件，那么我们如何去了解，去使用JavaScript之中的事件机制那，本文将会带你了解浏览器看似复杂的事件触发机制。

浏览器触发

事件最主流的触发方式就是用户操作浏览器之中的dom对象，浏览器捕获事件，将预先绑定好的事件处理函数执行。像是比较常见的 click , mouseover , mouseout , mousemove ,...这些事件，说起来其实都是浏览器早就规定好的和用户的交互，用户触发了事件，实现对应的功能。

举例说明一下 :

某东轮播图.png

某东的轮播图，在点击按钮之后会执行对应的图片切换功能，这个如果事件不用你去操心，浏览器捕获到就会自动去检查自己的所有dom对象之中是否有相应的元素侦听，如果存在就直接触发。

我们看一下代码：


    //假定按钮的id就是btn；
    var btn = document.getElementById("btn");
    // 给 btn添加事件的侦听。
    btn.addEventListener("click" , changeBanner );

当浏览器捕获到用户的点击操作，他就会在事件触发元素上逐层向上查找

事件触发模型.png

这个传递过程大概是 :

触发元素 - > 父级元素 -> 父级元素 -> ... -> body -> html , -> document

在这个过程之中，所有监听了click 事件的元素都会被通知，元素一旦接到通知，就会立即执行对应的功能函数。
这就是浏览器的默认事件触发。

事件的主动触发(抛发)

事件主动触发应用1 :

假定你的轮播图实现和我写的功能一样，那么你需要轮播图自动播放的时候应该怎么办那? 我们考虑n多解决方案的一种，就是不由浏览器触发事件我们自行去触发事件，这个触发事件的方法就叫做 target.dispatchEvent

代码如下 :

    // 编写一个定时器
  var timer = setInterval( function(){
        // 主动触发click事件;
        // 1. 创建一个事件对象;
        var evt = new Event("click");
        // 2. 事件抛发
        btn.dispatchEvent(evt ); 
  }, 3000)

这样就可以实现轮播图的自动播放。

事件主动触发应用2 :

如果你想定义一下专属于自己的函数，想要让代码看起来高端大气上档次一点，当然也可以自定义一个事件，笔者认为这也只是这个问题众多解决方案之中的一种，且这种写法笔者并不会优先考虑，写出来为小白扫个盲。

    // 首先在document上定义一个随意的事件名， 如果在做项目，这个名字一定要和业务相关。

    document.addEventListener("gongyangwuyi", function(){ // 需要执行的功能  });
    
  // 将自定义事件触发
   document.dispatchEvent(new Event("gongyangwuyi"))

当然你可以绑定多个这样的事件，会按照顺序进行触发

    // 首先在document上定义一个随意的事件名， 如果在做项目，这个名字一定要和业务相关。

    document.addEventListener("gongyangwuyi", function(){ // 需要执行的功能 1 });
    document.addEventListener("gongyangwuyi", function(){ // 需要执行的功能 2  });
  // 将自定义事件触发
   document.dispatchEvent(new Event("gongyangwuyi"))

ok，事件抛发到这就已经完结了，这就是事件抛发，如果有更多的程序设计，结合设计模式实现这样的抛发功能也是非常优雅的选择。

其实程序的本身可以有太多的构成方式，选择一种最合适的才是重中之重。

最后编辑于：2020.02.25 12:54:22