前端基础 — Web事件总结

April 发布于2019-08-23 14:42 / 937人阅读

摘要：中的所有事件处理器都是由提供的。事件触发时的回调函数。一个布尔值，表示该事件是否能够在中冒泡。注册事件监听的对象。对事件起源目标的引用。方法作用取消默认事件阻止事件冒泡对象。用法向派发事件写在后面事件，是前端开发中的一个基础。

本文首发于公众号：符合预期的CoyPan

web中的事件

事件并不是JavaScript的核心部分，他们是在浏览器的Web Api中定义的。下面列举的几种情况，都属于发生了事件。

用户在某个元素上点击鼠标或悬停光标。

用户在键盘中按下某个按键。

用户调整浏览器的大小或者关闭浏览器窗口。

一个网页停止加载。

提交表单。

播放、暂停、关闭视频。

发生错误。

我们可以在代码中使用事件处理器来处理各种事件。

事件模型

假设我们有这么一段html代码：


    
        
            
                
                    Shady Grove
                    Aeolain
                
                
                    Over the River, Charile
                    Dorian

如果我们点击over the Rive, Charile，整个事件流程如下：

事件会经历三个阶段，上图中分别由红色、蓝色、绿色标出。第一阶段为红色，事件流从根元素一直走到点击的目标元素，这个过程称为捕获。第二阶段为蓝色, 称为目标阶段。这个阶段中，会处理点击事件，为事件加上各种属性等。第三阶段为绿色，事件又回重新回到根元素，这个过程称为冒泡。在整个事件流中，我们在事件流经过的任何元素上，都能监听到该事件，从而进行处理。

一般建议在冒泡阶段处理事件，这样可以最大限度的兼容各种浏览器。

注意：blur、focus、load、unload 等几个事件不会冒泡。

原因是在于：这些事件仅发生于自身上，而它的任何父节点上的事件都不会产生，所有不会冒泡。

我们可以查看事件的bubbles属性，来判断该事件是否可以冒泡。

事件处理

EventTarget

EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。Web中的所有事件处理器都是由EventTarget"提供"的。

addEventListener

该方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。其标准语法如下：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

type: 字符串。表示事件类型，比如: click。

listener：函数。事件触发时的回调函数。这个函数会接受一个Event事件对象。这个Event事件对象中，包含了以下重要的属性和方法（这里只列举出常用的）

属性	值
bubbles	只读。一个布尔值，表示该事件是否能够在DOM中冒泡。
cancelBubble	通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
cancelable	只读。一个布尔值，用来表示这个事件是否可以取消。
currentTarget	只读。注册事件监听的对象。
target	只读。对事件起源目标的引用。

方法	作用
preventDefault	取消默认事件
stopPropagation	阻止事件冒泡

options ：对象。指定一个listener的配置参数。

属性	值
capture	布尔值。如果为true，表示该listener会在捕获过程中执行。如果为false，listener会在冒泡过程中执行。默认为false。
once	布尔值。默认为false。如果为true，listener只会执行一次，并且执行后会被自动移除。
passive	布尔值。如果为true，则无法调用preventDefault来阻止默认事件。默认为false。这个属性有一个需要注意的地方。在safari浏览器的页面滚动事件中，这个值是默认的true。所以要阻止safari中的页面滚动，需要手动将这个值设为false。

useCapture：布尔值，可选。默认为false，事件在冒泡过程中触发listener。

removeEventListener

删除使用addEventListener注册到target上的事件。标准语法：

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

为了提高页面性能，我们在处理完某事件，并且不用继续监听该事件时，可以将之前注册的事件监听函数移除。需要注意的是，如果注册事件时，在捕获或冒泡阶段均进行了监听，那么移除时需要分别移除。

currentTarget 与 target的区别

在事件处理函数中，我们经常会使用到事件的这两个属性。currentTarget表示注册事监听的对象。target表示事件起源的对象。举个例子：


     child1
     child2
     child3


document.getElementById("father").addeventListener("click", function(e){
    console.log(e.currentTarget);
    console.log(e.target);
});

我们将事件处理函数绑定在father上。现在，如果我们点击的是child1，由于child1是事件源，那么e.target就是child1。而我们的事件处理函数是绑定在father上的，所以，e.currentTarget就是father。

这一点在开发过程中需要特别注意。

事件代理

这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点多带带设置事件监听器。举个例子：

我们要实现点击每一个li的时候，输出li内对应的数字，我们当然可以直接在所有的li上分别绑定一个事件。但是这样会造成内存的浪费。我们可以只在ul上绑定一个事件，根据事件的target来获取当前点击的li，拿到该li内对应的数字。

document.querySelector("ul").addEventListener("click", function(e){
    if(e.target && e.target.nodeName === "LI") {
        console.log(e.target.innerHTML);
    }
});

自定义事件

最新的DOM标准允许我们自定义事件。直接看下面的例子。

var fakeNode = document.createElement("Coy"); // 创建一个自定义元素
var evt = document.createEvent("Event"); // 创建一个自定义事件
var evtType = "test"; // 自定义事件的类型

// 事件监听函数
fakeNode.addEventListener(evtType, function(e){ 
    console.log(e); // e.type === "test";
}, false);

// 初始化事件。
// initEvent用法：event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false); 

// 向fakeNode派发evt事件
fakeNode.dispatchEvent(evt);

写在后面

事件，是前端开发中的一个基础。虽然简单，但是十分重要。

欢迎关注我的公众号: 符合预期的CoyPan
做一名符合预期的FE

云服务器 GPU云服务器 web前端基础 web前端零基础零基础web前端 web前端0基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101011.html

不能错过的web前端性能优化总结

摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析合并img、css、javascript文件，减少http请求缓存一切可缓存资源使用长Cache 使用外联式引用css、javascript文件压缩HTML、css、jav...

wums 2019-08-22 16:35 评论0 收藏0
不能错过的web前端性能优化总结

摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析合并img、css、javascript文件，减少http请求缓存一切可缓存资源使用长Cache 使用外联式引用css、javascript文件压缩HTML、css、jav...

宋华 2019-08-29 15:06 评论0 收藏0
Js基础知识（五） - 前端性能优化总结

摘要：前端性能优化总结资源优化缓存最好的资源优化就是不加载资源。缓存主要分为强制缓存和协商缓存。的值为服务端返回的数据到期时间。的使用教程为了保证正常的，有些渲染性能优化还是有必要的。前端性能优化总结资源优化缓存最好的资源优化就是不加载资源。缓存也是最见效的优化手段。说实话，虽然说客户端缓存发生在浏览器端，但缓存主要还是服务端来控制，与我们前端关系并不是很大。但还是有必要了解一下。 ...

lmxdawn 2019-08-01 18:38 评论0 收藏0
Js基础知识（五） - 前端性能优化总结

摘要：前端性能优化总结资源优化缓存最好的资源优化就是不加载资源。缓存主要分为强制缓存和协商缓存。的值为服务端返回的数据到期时间。的使用教程为了保证正常的，有些渲染性能优化还是有必要的。前端性能优化总结资源优化缓存最好的资源优化就是不加载资源。缓存也是最见效的优化手段。说实话，虽然说客户端缓存发生在浏览器端，但缓存主要还是服务端来控制，与我们前端关系并不是很大。但还是有必要了解一下。 ...

luxixing 2019-08-22 14:55 评论0 收藏0