第17章 事件
17.1 事件流
17.1.1 事件冒泡
由内向外触发
17.1.2 事件捕获
从外向内触发
17.2事件处理程序
// html
<input type="button" value="Click Me" onclick="console.log('Clicked')"/>
//domo
let btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log("Clicked");
};
//DOM2
//addEventListener()和 removeEventListener(),它们接收 3 个参数:事件名、事件处理函
//数和一个布尔值,true 表示在捕获阶段调用事件处理程序,false(默认值)表示在冒泡阶段调用事
//件处理程序。
let btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
console.log(this.id);
}, false);
//IE 事件处理程序 即 attachEvent()和 detachEvent()
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function() {
console.log("Clicked");
});
17.3 事件对象
在 DOM 中发生事件时,所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息,比如导致事件的元素、发生的事件类型,以及可能与特定事件相关的任何其他数据。例如,鼠标操作导致的事件会生成鼠标位置信息,而键盘操作导致的事件会生成与被按下的键有关的信息。所有浏览器都支持这个 event 对象,
17.4 事件类型
17.4.1 用户界面事件
- load:在window上当页面(包括所有外部资源)加载完成后触发
- unload:在window上当页面完全卸载后触发
- abort:在元素上当相应对象加载完成前被用户提前终止下载时触发
- error:在js报错时触发
- select:在文本框上当用户选择一个或多个字符时触发
- resize:在窗口或窗格被缩放时触发
- scroll:滚动时触发
17.4.2 焦点事件
- blur:当元素失去焦点时
- focus:获得焦点时触发
- focusin:当元素获得焦点时触发。这个事件是 focus 的冒泡版。
- focusout:当元素失去焦点时触发。这个事件是 blur 的通用版。
17.4.3 鼠标和滚轮事件
- click:单击,通常是左键或按键盘回车键时触发
- dbclick:双击
- mousedown:在用户按下任意鼠标键时触发
- mouseenter:在用户把鼠标光标从元素外部移到元素内部时触发,不会冒泡,也不会在光标经过后代元素时触发
- mouseleave:在用户把鼠标光标从元素内部移到元素外部时触发,不冒泡
- mousemove:在鼠标光标在元素上移动时反复触发
- mouseout:在用户把鼠标光标从一个元素移到另一个元素上时触发
- mouseover:在用户把鼠标光标从元素外部移到元素内部时触发。
- mouseup:在用户释放鼠标键时触发
17.4.4 键盘与输入事件
- keydown,用户按下键盘上某个键时触发,而且持续按住会重复触发。
- keypress,用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件。
- keyup:用户释放键盘上某个键时触发
17.4.5 合成事件
合成事件是在DOM3 Events中新增的,用于处理通常使用IMS输入时的复杂输入序列。IME 可以让用户输入物理键盘上没有的字符。例如,使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。合成事件有以下 3 种:
- compositionstart,在 IME 的文本合成系统打开时触发,表示输入即将开始;
- compositionupdate,在新字符插入输入字段时触发;
- compositionend,在 IME 的文本合成系统关闭时触发,表示恢复正常键盘输入。
17.4.6 变化事件
已被废弃
17.4.7 HTML5事件
-
contextmenu:鼠标右键事件
事件冒泡,因此只要给document指定一个事件处理程序就可以处理页面上所有同类事件。
可用event.preventDefault()取消冒泡 ,IE8 及更早版本中将 event.returnValue 设置为 false
-
beforeunload事件
在页面即将从浏览器中卸载时触发
-
DOMContentLoaded事件
在页面完全加载后触发,不用等待图片、js文件、css文件等外部资源加载完成
-
readystatechange
提供文档或元素加载状态的信息
-
pageshow 与 pagehide 事件
无论是否来自往返缓存,在新加载的页面上都会触发
-
hashchange 事件
用于在url发生变化时通知开发者
17.4.8 设备事件
-
orientationchange
判断用户的设备是处于垂直模式还是水平模式
-
deviceorientation
设备在空间中的朝向
-
devicemotion
这个事件用于提示设备实际上在移动,而不仅仅是改变了朝向。例如,devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的人手里
17.4.9 触摸及手势事件
- touchstart:手指放到屏幕上时触发(即使有一个手指已经放在了屏幕上)。
- touchmove:手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
- touchend:手指从屏幕上移开时触发。
- touchcancel:系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
- gesturestart:一个手指已经放在屏幕上,再把另一个手指放到屏幕上时触发。
- gesturechange:任何一个手指在屏幕上的位置发生变化时触发。
- gestureend:其中一个手指离开屏幕时触发。
17.5 内存与性能
17.5.1 事件委托
使用一个事件处理程序来管理一种类型的事件
17.5.2 删除事件处理程序
及时删除不用的事件处理程序,如:btn.onclick = null;
17.6 模拟事件
通过document.createEvent()方法创建一个 event 对象。
17.4 事件类型
17.4.1 用户界面事件
- load:在window上当页面(包括所有外部资源)加载完成后触发
- unload:在window上当页面完全卸载后触发
- abort:在元素上当相应对象加载完成前被用户提前终止下载时触发
- error:在js报错时触发
- select:在文本框上当用户选择一个或多个字符时触发
- resize:在窗口或窗格被缩放时触发
- scroll:滚动时触发
17.4.2 焦点事件
- blur:当元素失去焦点时
- focus:获得焦点时触发
- focusin:当元素获得焦点时触发。这个事件是 focus 的冒泡版。
- focusout:当元素失去焦点时触发。这个事件是 blur 的通用版。
17.4.3 鼠标和滚轮事件
- click:单击,通常是左键或按键盘回车键时触发
- dbclick:双击
- mousedown:在用户按下任意鼠标键时触发
- mouseenter:在用户把鼠标光标从元素外部移到元素内部时触发,不会冒泡,也不会在光标经过后代元素时触发
- mouseleave:在用户把鼠标光标从元素内部移到元素外部时触发,不冒泡
- mousemove:在鼠标光标在元素上移动时反复触发
- mouseout:在用户把鼠标光标从一个元素移到另一个元素上时触发
- mouseover:在用户把鼠标光标从元素外部移到元素内部时触发。
- mouseup:在用户释放鼠标键时触发
17.4.4 键盘与输入事件
- keydown,用户按下键盘上某个键时触发,而且持续按住会重复触发。
- keypress,用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件。
- keyup:用户释放键盘上某个键时触发
17.4.5 合成事件
合成事件是在DOM3 Events中新增的,用于处理通常使用IMS输入时的复杂输入序列。IME 可以让用户输入物理键盘上没有的字符。例如,使用拉丁字母键盘的用户还可以使用 IME 输入日文。IME 通常需要同时按下多个键才能输入一个字符。合成事件用于检测和控制这种输入。合成事件有以下 3 种:
- compositionstart,在 IME 的文本合成系统打开时触发,表示输入即将开始;
- compositionupdate,在新字符插入输入字段时触发;
- compositionend,在 IME 的文本合成系统关闭时触发,表示恢复正常键盘输入。
17.4.6 变化事件
已被废弃
17.4.7 HTML5事件
-
contextmenu:鼠标右键事件
事件冒泡,因此只要给document指定一个事件处理程序就可以处理页面上所有同类事件。
可用event.preventDefault()取消冒泡 ,IE8 及更早版本中将 event.returnValue 设置为 false
-
beforeunload事件
在页面即将从浏览器中卸载时触发
-
DOMContentLoaded事件
在页面完全加载后触发,不用等待图片、js文件、css文件等外部资源加载完成
-
readystatechange
提供文档或元素加载状态的信息
-
pageshow 与 pagehide 事件
无论是否来自往返缓存,在新加载的页面上都会触发
-
hashchange 事件
用于在url发生变化时通知开发者
17.4.8 设备事件
-
orientationchange
判断用户的设备是处于垂直模式还是水平模式
-
deviceorientation
设备在空间中的朝向
-
devicemotion
这个事件用于提示设备实际上在移动,而不仅仅是改变了朝向。例如,devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的人手里
17.4.9 触摸及手势事件
- touchstart:手指放到屏幕上时触发(即使有一个手指已经放在了屏幕上)。
- touchmove:手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
- touchend:手指从屏幕上移开时触发。
- touchcancel:系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
- gesturestart:一个手指已经放在屏幕上,再把另一个手指放到屏幕上时触发。
- gesturechange:任何一个手指在屏幕上的位置发生变化时触发。
- gestureend:其中一个手指离开屏幕时触发。
17.5 内存与性能
17.5.1 事件委托
使用一个事件处理程序来管理一种类型的事件
17.5.2 删除事件处理程序
及时删除不用的事件处理程序,如:btn.onclick = null;
17.6 模拟事件
通过document.createEvent()方法创建一个 event 对象。