本文详细介绍了JavaScript事件，包括事件流、事件处理函数、事件对象、事件委托等基础知识。此外，详细列举了UI事件、焦点事件、鼠标及滚轮事件、键盘及文本事件、触摸及手势事件，并探讨了HTML5新增的事件。最后，讨论了自定义事件和事件循环机制，为理解和使用JavaScript事件提供全面指导。
概念
- 事件流：描述从页面中接收事件的顺序
- 事件流的三个阶段：捕获、处于目标对象、冒泡
- 事件：用户或浏览器自身执行的某种动作
- 事件处理函数：响应某个事件的函数，以on开头
- 事件名：click
事件处理函数名：onclick- 定义事件处理程序（即事件的响应函数）：
- 在html中定义
- js中定义-DOM0：ele.οnclick=fn
移除事件：ele.onclick = null- js中定义-DOM2：ele.addEventListener(‘click’,fn,{})
- 事件对象（event）：所有与事件有关的，从浏览器传导事件处理程序函数中
- target、currentTarget
- target：点击的元素
- currentTarget：注册事件的元素
- 事件委托：
- 把事件绑定在父元素等高层级元素上，或绑定在document上，利用事件冒泡机制，可以解决事件处理程序过多问题。
- 从文档中移除带有事件处理程序的元素时，这些事件处理程序可能无法被当做垃圾回收，所以要先清除这些事件处理程序btn.onclick = null或btn.removeListenerListener('click)
- DOM2事件
- addEventListener()和removeEventListener()的参数必须相同
- 可以给一个元素指定多个相同事件，按顺序执行，不会被覆盖
- 可以设置在冒泡（false默认）还是捕获（true）时触发函数
- 事件类型
- UI
- 焦点
- 鼠标及滚轮
- 键盘及文本
- 触摸及手势
- HTML5事件
- 复合
- 设备
- 变动
各类事件
- UI事件：
- load：
- 当页面完全加载完在window上面触发
- 当图片或视频加载完在<img>或<video>上面触发
- 当资源如<link>、<script>加载完在这些标签上触发
- 当框架加载完在框架上触发
- unload：
- 当页面完全卸载完在window上面触发
- 当框架卸载完在框架上触发
- resize：
- 当窗口大小发生变化时，在window上触发
- 当框架大小发生变化时，在框架上触发
- scroll：
- 当用户滚动带滚动条的元素，在该元素上触发
- 当用户滚动页面滚动条时，在<body>上触发
- select：
- 当用户选择文本框（<input>、<textarea>）中的一个或者多个字符时触发
- error：
- 当发生js错误时在window上面触发
- 当图片或视频无法加载时在<img>或<video>上面触发
- 当资源如<link>、<script>无法加载时在这些标签上触发
- 当框架无法加载时在框架上触发
- abort：
- 当用户停止下载
- 当图片或视频没有加载完在<img>或<video>上面触发
- 焦点事件
- foncus：在元素获得焦点时触发，不会冒泡
- blur：在元素失去焦点时触发，不会冒泡
- focusin：在元素获得焦点时触发，会冒泡
- focusout：在元素失去焦点时触发，会冒泡
- 鼠标及滚轮事件：
- click：在用户单击鼠标按钮（一般为鼠标左键）或者按下回车键时触发
- dblclick：在用户双击鼠标按钮（一般为鼠标左键）时触发
- mousedown：在用户按下任意鼠标按钮时触发
- mouseup：在用户释放鼠标按钮时触发
- mouseenter：在鼠标从元素外部首次移动到元素范围之内时触发，不冒泡
- mouseleave：在鼠标从元素内部移动到元素外部是触发，不冒泡，在鼠标从元素内移动到其后代元素上不会触发
- mousemove：当鼠标在元素内部移动时触发
- mouseover：在鼠标位于一个元素外部，用户将其首次移入另一个元素边界时触发，包括其后代元素
- mouseout：在用户将鼠标从一个元素移入另一个元素时触发，或者用户将鼠标从一个元素移入其后代元素时触发
- mousewheel：当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时会触发
- 鼠标及滚轮事件相关知识：
- 修改键：
- 修改键有Shift、Ctrl、Alt、Meta（Widows中为Windows，Mac中为Cmd）
- event中有对应的属性shiftKey、ctrlKey、altKey、metaKey，均为布尔值
- 这些布尔值为true，表示相应的键被按下了
- 相关元素：
- mouseover：事件的主目标是获得光标的元素，相关元素是失去光标的元素
- mouseout：事件的主目标是失去光标的元素，相关元素时获得光标的元素
- event的relatedTarget属性，表示相关元素
- 鼠标按钮：
- event的button属性，表示按下或释放的按钮
- 0表示鼠标左键，1表示鼠标滚轮，2表示鼠标右键
- 该属性针对于mousedown、mouseup事件
- 点击次数：
- event的detail属性，为一个数值，表示在给定位置上发生了多少次单击,从1开始计数
- mousedown和mouseup为一次单击
- mousedown和mouseup之间移动了位置，detail会被重置为0
- 鼠标滚轮滚动方向：
- event的wheelDelta属性，当向上滚动滚轮时，其值为120的倍数；当向下滚动时，其值为-120的倍数
- 鼠标事件中包含光标位置信息：clientX、clientY、pageX、pageY、screenX、screenY
- 键盘及文本事件：
- keydown：当用户按下键盘上的任意键时触发，按下不放会重复触发
- keypress：当用户按下键盘上的字符键时触发，按下不放会重复触发
- keyup：当用户释放键盘上的键时触发
- textInput：用户在可编辑区域中输入字符时触发
- 键盘及文本事件相关知识：
- keypress和textInput区别：
- keypress：
- 任何可以获得焦点的元素都可以触发
- 按下影响文本显示（输入和删除）的键时触发
- event的charCode属性，表示按下的那个键所代表的字符的ASCII编码（可以用String.fromCharCode()转化为实际字符）
- textInput：
- 只有可以编辑的区域才能触发
- 按下能够输入实际字符的键时才触发
- event的data属性，表示用户输入的实际字符
- event的inputMethod，表示把文本输入到文本框的方式（如：不确定怎么输入的为0，键盘输入为1，粘贴进来的为2，拖放进来的为3，表单中选择输入的为5.。。。）
- keyCode：
- 发生在keydown和keyup事件中
- event的keyCode属性，表示对应键的键码
- 同鼠标事件相同，也支持修改键
- 触摸及手势事件：
- touchstart：当手指触摸屏幕时触发，即使已经有一个手指放在了屏幕上也会触发
- touchmove：当手指在屏幕上滑动时连续触发，在这个事件发生期间调用preventDefault()，可以阻止滚动
- touchend：当手指从屏幕上移开时触发
- touchcancel：当系统停止跟踪触摸事件时触发
- gesturestart：当一个手指已经按在屏幕上而另一个手指有触摸屏幕时触发
- gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发
- gestureend：当触摸屏幕的任何一个手指从屏幕上移开时触发
- 触摸事件的三个用于跟踪触摸的属性：
- touches：当前跟踪的触摸操作的touch对象的数组
- targetTouches：特定于事件目标的touch对象的数组
- changeTouches：自上次触摸以来发生了什么改变的touch对象的数组
- 以上三个属性包含如下属性：clientX、clientY、pageX、pageY、screenX、screenY、target（触摸的DOM节点目标）、identifier（标识触摸的唯一ID）
- 手势事件特性：
- 两个手指都触摸到时间的接收容器时才能触发
- 手势事件的event的rotation属性，表示手指变化引起的旋转角度；负值表示逆时针旋转，正值为顺时针旋转，该值从0开始
- 手势事件的event的scale属性，表示两个手指间的间距的变化情况（如：向内收缩距离会变短），该值从1开始
- HTML5事件：
- contextmenu：
- 点击鼠标右键时触发，可以调出上下文菜单
- 可以调用event.preventDefault()屏蔽默认的上下文菜单
- 显示自定义的上下文菜单
- 是鼠标事件，所以有光标位置信息clientX、clientY、pageX、pageY、screenX、screenY
- beforeunload：
- 在浏览器卸载页面之前触发
- 不能彻底取消这个事件，而是弹出消息对话框告知用户页面将被卸载，把决定权交给用户
- 为了显示该对话框，需要将event.returnValue的值设置为要显示给用户的字符串，并作为函数的返回值
- DOMContentLoaded：
- load事件会在页面一切都加载完毕时触发
- DOMContentLoaded事件在形成完整的DOM树时触发（不包含外部资源，如图片js和css文件等）
- 如果不支持DOMContentLoaded事件可以在js文件最开始设置一个时间为0的超时调用setTimeout
- readystatechange：
- readystatechange事件的目的是提供与文档或元素的加载状态有关的信息
- 支持readystatechange事件的文档或元素都有夜歌readyState的属性，表示事件的状态
- readyState有5个值：
uninitialized（未初始化）：对象存在但尚未初始化
loading（正在加载）：对象正在加载数据
loaded（加载完毕）：对象加载数据完毕
interactice（交互）：可操作对象了，但还没有完全加载
complete（完成）：对象已经加载完毕- readystatechange事件中readyState的状态不一定会经历所有状态，所以监听状态时，有必要同时检测多个状态
- pageshow：
- 往返缓存（back-forward cache，或bfcache）：用于点击浏览器‘后退’和‘前进’按钮时，将整个页面保存在内存里，再次打开该缓存的页面时不会触发load事件
- pageshow事件会在页面显示时触发，不论该页面是否来自bfcache都会触发；
- 重新加载的页面，pageshow会在load之前触发
- 来自bfcache的页面，pageshow会在页面状态完全恢复时触发
- pageshow的目标是document，但必须将时间处理程序添加到window上
- pageshow的event的persisted属性为布尔值，为true时，表示页面被保存在了bfcache中
- pagehide：
- pagehide会在浏览器卸载页面时触发，而且是在unload之前触发
- pagehide的目标是document（即在document上触发），但必须将时间处理程序添加到window上
- pagehide的event的persisted属性为布尔值，为true时，表示页面在卸载之后会被保存在了bfcache
- hashchange：
- hashchange事件在URL的参数列表（及URL中‘#’号后面的所有字符串）发生变化时触发
- 事件在window上添加
- 事件的event的oldURL和newURL属性，分别保存着参数列表变化前后的完整URL
- 复合事件：
- 用于处理IME（Input Method Editor，输入法编辑器）输入字符问题，例如：输入多个字母但最终只输入一个字符的中文；英文输入则是输入一个字母最终就为一个字母
- compositionstart：在IME打开时触发，表示要开始输入了
- compositionupdate：在向输入字段中插入新字符时触发
- compositionend：在IME关闭时触发，表示返回正常键盘出入状态（例如：中文输入法转化为正常的英文输入法）
- 事件的event的data属性，保存各种事件时的字符
自定义事件
- 创建event对象：document.createEvent(事件类型字符串)
- 初始化event对象：创建的event对象中有初始化方法
- 触发事件：再要绑定该事件的元素上
document.body.addEventListener('myclick',function(){
console.log('test....')
})
let myevent = document.createEvent('HTMLEvents');
myevent.initEvent('myclick');
setTimeout(() => {
document.body.dispatchEvent(myevent);
}, 1000);
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
