JavaScript高级程序设计 第4版 -- 事件

第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事件

1. contextmenu：鼠标右键事件

   事件冒泡，因此只要给document指定一个事件处理程序就可以处理页面上所有同类事件。

   可用event.preventDefault()取消冒泡 ，IE8 及更早版本中将 event.returnValue 设置为 false

2. beforeunload事件

   在页面即将从浏览器中卸载时触发

3. DOMContentLoaded事件

   在页面完全加载后触发，不用等待图片、js文件、css文件等外部资源加载完成

4. readystatechange

   提供文档或元素加载状态的信息

5. pageshow 与 pagehide 事件

   无论是否来自往返缓存，在新加载的页面上都会触发

6. hashchange 事件

   用于在url发生变化时通知开发者

17.4.8 设备事件

1. orientationchange

   判断用户的设备是处于垂直模式还是水平模式

2. deviceorientation

   设备在空间中的朝向

3. devicemotion

   这个事件用于提示设备实际上在移动，而不仅仅是改变了朝向。例如，devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的人手里

17.4.9 触摸及手势事件

1. touchstart：手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上）。
2. touchmove：手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
3. touchend：手指从屏幕上移开时触发。
4. touchcancel：系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
5. gesturestart：一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发。
6. gesturechange：任何一个手指在屏幕上的位置发生变化时触发。
7. 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事件

1. contextmenu：鼠标右键事件

   事件冒泡，因此只要给document指定一个事件处理程序就可以处理页面上所有同类事件。

   可用event.preventDefault()取消冒泡 ，IE8 及更早版本中将 event.returnValue 设置为 false

2. beforeunload事件

   在页面即将从浏览器中卸载时触发

3. DOMContentLoaded事件

   在页面完全加载后触发，不用等待图片、js文件、css文件等外部资源加载完成

4. readystatechange

   提供文档或元素加载状态的信息

5. pageshow 与 pagehide 事件

   无论是否来自往返缓存，在新加载的页面上都会触发

6. hashchange 事件

   用于在url发生变化时通知开发者

17.4.8 设备事件

1. orientationchange

   判断用户的设备是处于垂直模式还是水平模式

2. deviceorientation

   设备在空间中的朝向

3. devicemotion

   这个事件用于提示设备实际上在移动，而不仅仅是改变了朝向。例如，devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的人手里

17.4.9 触摸及手势事件

1. touchstart：手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上）。
2. touchmove：手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
3. touchend：手指从屏幕上移开时触发。
4. touchcancel：系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。
5. gesturestart：一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发。
6. gesturechange：任何一个手指在屏幕上的位置发生变化时触发。
7. gestureend：其中一个手指离开屏幕时触发。

17.5 内存与性能

17.5.1 事件委托

使用一个事件处理程序来管理一种类型的事件

17.5.2 删除事件处理程序

及时删除不用的事件处理程序，如：btn.onclick = null;

17.6 模拟事件

通过document.createEvent()方法创建一个 event 对象。