JS事件机制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ws9029/article/details/107402484

在JS事件中是js中很重要的一块内容，有时候面试的时候常常会问到，我们写程序几乎天天和事件打交道，貌似很简单的问题，你真的理解了吗？什么是事件的三要素，事件的模型有几种？事件是怎么传播的？对于事件流你怎么理解？什么是捕获（冒泡）阶段，执行顺序是什么？什么是事件代理？等！如果你都了解了，那么你不要浪费时间了，请关闭网页！下面我会对这些内容分几遍文章，从浅入深的来一一分析！下面我来说下事件的三要素和js中的几种事件模型！

1.事件三要素

首先我们必须理解事件是什么？我们生活中很多事件，比如关灯啊，跑步啊，摸鱼啊！
就拿关灯这个事件来说吧！关灯？总得有个人关灯吧？那么事件源就是关灯那个人！事件就是关灯事件，关灯后发生了什么事情呢？灯灭了！那么这个就是事件处理程序（想要达到的目的）！

1.事件源---------------人
2.事件-----------------关灯
3.事件处理程序-----灯灭了（执行的目标）
公式：事件源.事件=function(){事件处理函数}；

那么在js中我们怎么理解的呢？

1. 事件源

是指那个元素引发的事件，当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转等），那么这个元素就是事件源！

2. 事件

事件是指执行的动作。例如:点击，移入，按下键盘等

3. 事件处理程序

即执行结果，你想要达到的目的，例如:你点击一个返回到顶端的按钮，它会直接跳到页面顶端，那么跳到页面顶端是你执行的结果！

js的执行步骤：
1.获取元素
2.元素上绑定事件
3.书写事件处理程序

<body>
    <button class="btn">跳到百度页面</button>
</body>

</html>

<script>
    var btn = document.querySelector('.btn');//获取元素
    //元素上绑定事件
    btn.onclick = function () {
        window.location.href = 'https://www.baidu.com';//事件处理程序
    }
</script>

效果如下：
在这里插入图片描述
上面的内容比较小白！也很通俗易懂，就不多说了！下面来说下js几种事件模型!

2.事件模型(事件绑定方式)

上面我已经说了事件如何绑定，那么事件有几种绑定方式呢？

1. DOM0级模型

这个事件我们用的比较多，这种模型不会传播，所以没有事件流（不懂的可以点击彻底理解js的事件流）的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js属性来指定监听函数。这种方式是所有浏览器都兼容的,也可以直接在html标签里添加事件！两者原理是相同的！

<body>
    <button class="btn" onclick="fn()">跳到百度页面</button>
</body>

</html>

<script>
    var btn = document.querySelector('.btn');
    var fn = function () {
        console.log(this);//window
        window.location.href = 'https://www.baidu.com';

    }
    var fn1 = function () {
        console.log(this);//btn元素
        window.location.href = 'https://www.baidu.com';
    }
    btn.onclick = fn1; 
</script>

我这样写后面的事件会覆盖前面的事件(为了看的清楚)，这个也是DOM0级模型的缺陷，同时this的指向也不一样，如果不了解这个this指向的可以点击DOM事件绑定的this问题

2. IE事件模型

在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行！

  var btn = document.querySelector('.btn');
    btn.attachEvent('onclick', function () {
       alert('第一个click事件')
    });
    btn.attachEvent('onclick', function () {
        alert('第二个click事件')
    });

IE的事件机制没有捕获阶段，事件流是非标准的（有兼容问题），只有事件处理阶段阶段和事件冒泡阶段。可以监听多个事件,也可以移除事件！

    var btn = document.querySelector('.btn');
    var fn = function () {
        alert('第一个click事件');
    };
    var fn1 = function () {
        alert('第二个click事件');
    };
    btn.attachEvent('onclick', fn);

    btn.attachEvent('onclick', fn1);

    btn.detachEvent('onclick', fn);//删除第一个点击事件

删除了第一个点击事件，所以只会执行第二个绑定的click事件！

3. DOM2级模型

在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行！

   var btn = document.querySelector('.btn');
    var fn = function () {
        alert('第一个click事件');
    };
    var fn1 = function () {
        alert('第二个click事件');
    };
    btn.addEventListener('click', fn);

    btn.addEventListener('click', fn1);

    btn.removeEventListener('click', fn); //删除第一个点击事件