让前端飞Web前端之路前端

《JS原理、方法与实践》- DOM事件

2020-08-10  本文已影响0人  张中华

事件就是用来完成“当...时做...”的功能，也就是起监听作用。事件给我们提供了一个跟文档对象进行沟通的接口。
事件主要由三部分组成：事件的目标（EventTarget）、事件监听器（EventListener）和事件本身（Event）。事件的目标可以理解为事件的主人，也就是谁的事件，在DOM中就是各种Node节点；DOM中的事件监听器可以理解为处理事件的函数；事件就是当事件目标（EventTarget）上特定的事件发生之后发送给事件监听器的信息。

事件流

Events子标准中规定事件的传递首先从最外层节点（Document）开始，然后逐层向内部传播，一直传到最内层节点之后再逐层往外返回。整个传播流程可以 分为两个过程和三个阶段：

两个过程分别叫做：捕获过程和冒泡过程

捕获过程时从外向内传播的过程，冒泡过程则是从内向外的过程

三个阶段分别叫做： 捕获阶段，目标阶段和冒泡阶段

捕获阶段和冒泡阶段分别对应的时捕获过程和冒泡过程，目标阶段指的时事件传递到最内层节点时的阶段。

DOM标准中默认的事件处理是在冒泡过程中进行的！

EventTarget

EventTarget指事件的目标（主人），即各种不同的节点，DOM中的节点都可以用作EventTarget。EventTarget中共有三个方法属性，如下所示。

其中，type指的是要监听的事件类型，listener就是要添加或删除的事件监听器EventListener，一般包含一个event参数的处理方法，capture为布尔类型，表示是否使用捕获过程，默认值为false。
代码示例：

<body style="width: 100%; height: 888px">
    <script>
        const body = document.querySelector('body');
        // 设置capture 为true， 则先执行window的监听事件，再执行body的监听事件
        window.addEventListener('click', function(){console.log('window click!')}, true);
        body.addEventListener('click', function(){console.log('body click!')});
    </script>
</body>
测试结果

EventListener

EventListener是事件监听器接口，用于对接到的事件具体执行处理。其中只有一个方法handleEvent(event)用于具体处理事件。EventListener接口在实际使用中就是一个包含Event参数的方法。

Event

Event是事件接口，用来包含事件中的信息，例如事件所在的事件目标、事件类型。如果是单及事件，那么还会包含鼠标单击时的坐标信息等，事件监听器函数在处理事件时都会接收到一个Event参数。
Event是总的事件接口，DOM2中共有4种具体的事件类型，分别是UIEvents、MouseEvents、MutationEvents和HTMLEvents。可以使用DOMImplementation的hasFeature方法来判断浏览器是否支持某种类型事件，调用时第一个参数传入要检查的事件类型，第二个参数传入2.0就可以了。


事件类型的继承关系
Event接口

Event接口时所有事件类型的总接口，因此Event中的属性在所有的事件中都可以使用。Event包含7个只读属性、3个方法属性和3个常量属性：

其中，最后三个属性为常量属性，用于表示eventPhase属性的接口。
Event中的stopPropagation方法用来停止事件流的传播，无论在哪个阶段，只要在事件处理方法中调用了事件的stopPropagation方法事件流，就不再接着向下传播了。
Event中的preventDefault方法用来阻止当前节点执行默认操作，但它并不会终止事件流传播，当事件的cancelbale为false时，preventDefault方法将不起作用。

UIEvents事件

UIEvents事件对应UIEvents接口。UIEvents继承自Event接口，在Event接口的基础上增加了两个只读属性和一个方法属性。只读属性时view和detail，分别表示视图和详细信息，view为Views子标准中的AbstractView类型，在浏览器中一般就是window对象；detail为整数类型，表示事件的相关信息，所表示的内容跟具体事件相关。新增的方法为initEvent, 它在原来的initEvent方法上添加了两个自己的属性，它的作用是新建UIEvent类型的事件，调用语法如下：

event.initEvent(type, canBubble, cancelable, view, detail);
UIEvents事件的三种类型

表中是否可冒泡和是否可取消分别对应canBubble和cancelable两个属性。

MouseEvents事件

MouseEvents事件对应MouseEvents接口。MouseEvent继承自UIEvent接口，它在UIEvent的基础上新增加了10个只读属性和一个方法属性。


10个只读属性如下:

MouseEvent接口中新增的方法为initMouseEvent，它在原来initUIEnent方法上将新增的10个属性加到参数中，它的作用是创建MouseEvent类型的事件，调用语法如下：
event.initMouseEvent(type,canBubble,cancelable,view,detail,.....);

MouseEvents事件的类型

MutationEvents事件

MutationEvents事件对应MutationEvent接口。Mutation接口继承自Event接口，它在原来的基础上添加了5个只读属性、一个方法属性和3个常量属性。

5个只读属性
事件类型

HTMLEvents事件

HTMLEvents事件没有自己单独的接口，也就是说，它直接使用Event接口。HTMLEvents事件共有12种类型，如下：


HTMLEvents事件的类型

DOM0级事件

Events子标准实在DOM2种才加入的。其实，在DOM标准发布之前浏览器种就已经可以使用事件了，此类型事件一般叫做DOM0级事件。
DOM0级事件是通过节点的属性来实现的，属性的名称为“on+事件名”的格式，其中，事件名的首字母不需要大写，例如，onclick、onload、onfocus等。DOM0级事件的添加有两种方式，一种是直接作为属性写在标签中，另一种是在脚本中通过节点对象的属性 来添加。
代码示例：

<body onload="listener(event);">
    <div id='a'>excellib</div>
    <script>
        function listener(event){
            console.log(event.type);
        }
        var div = document.getElementById('a');
        div.onclick = listener;
    </script>
</body>
测试结果

个人wx：iotzzh
前端公众hao：前端微说

上一篇下一篇

猜你喜欢

热点阅读