JS 事件

Posted 2020-09-29

JS事件

1.什么是事件呢？

额，，通俗的解释就是当用户通过鼠标或键盘对页面上的一些元素进行操作时，就会产生事件，比如你点击一个按钮，这就是事件。

2.事件流又是什么呢？

 事件流，“流”，就是流动的意思，字面意思就是事件的流动，这样太晦涩难懂。通俗讲就是，当事件发生时，页面上的元素就会接收到事件，比如你点击一个按钮时，页面上有许多的元素，比如有 body ,head ,div...等等标签，那当你点击时，事件就发生了，那页面该如何知道或接收这个事件的产生呢？总得有个先后顺序，这个接收事件的顺序就是事件流。事件流有三种模型。分别是：

 1.  IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素；

 2.  Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反

 3.  DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

冒泡模型，可以这样理解，由里及外的接收，比如下面这段代码：

<div class=‘parents‘>
    <div class="box">
        <input type="button" value="点我‘ onclick="showHello()">
    </div>
</div>

当你点击时，就产生了一个点击事件，那这个点击事件被各元素接收的先后顺序是怎么样的呢？

冒泡模型是：先是input元素接收到该事件，然后再是box的div,再是外层的div.这样由里及外的接收该事件。

事件捕获是：先由documen节点接收到，然后到html,,逐渐向目标元素接收。

而DOM则规定，事件流分为三个阶段，分别是捕获阶段，目标阶段，冒泡阶段。

如图1.1

当事件发生后，页面上的元素接收到事件后，就可以对该事件做出反应，可以理解为当该元素接收到事件时如何处理，会做出什么样的反应，这就是所谓的事件处理程序，也叫事件监听器。其实就是一个函数，该函数的功能由你定义。现在就该考虑如何将这个监听函数绑定到指定的元素上。有以下几种方式能够将事件处理程序绑定到元素节点上：

1. HTML内联方式：就是直接通过标签的事件属性绑定监听函数。
2. DOM0级：将监听函数赋值给标签的事件属性。
3. DOM2级：通过addEventListener()方法绑定。
   
   HTML内联方式绑定：

            DOM0级方式绑定：

            DOM2级方式绑定

下次写这几种绑定方式的优缺点和IE兼容写法，先睡觉去。