JS事件浅析

klivitamJ 发布于2019-08-20 18:16 / 1788人阅读

摘要：事件有很多，有我用过的有我没用过的，今天我想分析一番。阻止默认事件，表单提交，标签。触发事件的元素，事件委托会用到。在文本插入文本框之前会触发事件。

一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一番。

事件流

我们都知道，有两种事件流，一个是冒泡一个是捕获。

捕获就是从body开始到你触发事件的节点，从外到内的一个过程。

冒泡呢，与之相反，从你触发的节点开始，一级一级往外，直到body，是一个从内到外的过程。

那么他们两个是同时进行的吗？他们的顺序是先捕获，再冒泡。

在addEventListener中addEventListener（event事件名称，function回调函数，是否在捕获或冒泡阶段执行）第三个参数可以改变事件触发时机。

事件对象 event

div.onclick=function(event){}这个里面的event就是事件对象，我这里说几个常用的。

event.preventDefault() //阻止默认事件，表单提交，a标签。
event.stopPropagation() //阻止传递下去，一帮用在一些自定义组件上，比如遮罩隐藏，在弹框上就要阻止传递了。
event.target //触发事件的元素，事件委托会用到。

事件名称

下面我会把事件列举一下

通用事件

load 加载成功，window.load(function(){}),还有一个与之类似的DOMContentLoad当DOM加载完成之后触发。

unload 与之相反，卸载的时候

error 发送错误的时候，这个比较有意思。img触发error之后使用一张占位图。监听全局的错误提示，然后统计汇总，比如fundebug，也可以自己根据特性写一个针对公司项目的。

scroll 滚动的时候触发，无限滚动之类的一些效果

resize 放大缩小窗口的时候发生变化，和上面的scroll都需要注意去抖，

鼠标事件传送门，去看鼠标事件

click 单击事件，在DOM上单击鼠标时候触发。用户在完成一次mousedown和mouseup之后触发click。触发顺序是：mousedown -> mouseup -> click。

mousedown和mouseup 鼠标按下和弹起，使用频率不是很高。可以做一下拖动之类的效果。

mouseout和mouseover 鼠标移出和移入，使用起来会有冒泡的问题，可以使用延时的方法解决

mouseleave和mouseenter 鼠标移除和移除，解决了冒泡的问题。

mousemove 鼠标移动

键盘通用事件

keydown 按下键盘

keypress 中间的一个事件

keyup 抬起键盘

textInput 是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。

compositionstart 在IME的文本复合系统打开时触发，表示要开始输入了。当你使用输入法的时候会触发一下

compositionupdate 在向输入字段中插入新字符时触发。

compositionend 在IME的文本复合系统关闭时触发，表示返回正常键盘的输入状态。

控件事件

input 当内容发生改变的时触发，有可能是代码触发的改动兼容ie的话input propertychange

change 当失去焦点时，内容改变触发

blur 失去焦点触发

focus 获得焦点触发

DOM变动事件
这类事件我没有用到过，前段时间在网上看到了一些，整合一下写写测试测试地址

DOMNodeInserted 插入节点时触发，appendChild这种

DOMNodeRemoved 移除节点时触发，removeChild

DOMSubtreeModified 发生变化最后会触发

DOMNodeInsertedIntoDocument

DOMAttrModified

DOMCharacterDataModified

触摸事件移动端

touchstart 触摸

touchmove 触摸时移动

touchend 移开
手势 gesturestart - gesturechange - gestureend

云服务器服务器托管源码浅析 cdn浅析 js 事件分发 js 穿透事件

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

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

JS事件浅析

摘要：事件有很多，有我用过的有我没用过的，今天我想分析一番。阻止默认事件，表单提交，标签。触发事件的元素，事件委托会用到。在文本插入文本框之前会触发事件。一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一...

youkede 2019-08-01 17:14 评论0 收藏0
浅析 JS 事件循环之 Microtask 和 Macrotask

摘要：常见应用则是为了完成一些更新应用程序状态的较小的任务，如处理的回调和的修改，以便让这些任务在浏览器重新渲染之前执行。常见应用执行顺序的实现需要至少一个和至少一个。简介我们在上一篇《浅析 JS 中的EventLoop 事件循环》中提到一个 Event Queue，其实在事件循环中 queue 一共有两种，还有一种叫 Job Queue 其中 Event Queue 在 HTML...

sihai 2019-08-23 18:00 评论0 收藏0
浅析 JS 中的 EventLoop 事件循环（新手向）

摘要：同时，如果执行的过程中发现其他函数，继续入栈然后执行。上面我们讨论的其实都是同步代码，代码在运行的时候只用调用栈解释就可以了。序 Event Loop 这个概念相信大家或多或少都了解过，但是有一次被一个小伙伴问到它具体的原理的时候，感觉自己只知道个大概印象，于是计划着写一篇文章，用输出倒逼输入，让自己重新学习这个概念，同时也能帮助更多的人理解它~ 概念 JavaScript 是一门 ...

chadLi 2019-08-26 13:58 评论0 收藏0
Service Worker 浅析

摘要：可以发送通知消息以再次吸引用户并留住他们。在即时通讯等使用情形中，一条消息可将最多的有效负载传送至客户端应用。浏览器的的消息推送主要依赖，服务端消息推送传递到，然后再由推送到客户端。引言 Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。Service Worker 是 PWA 中的重要一部分。Service ...

The question 2019-08-26 13:38 评论0 收藏0