JS高程 -- chapter13( 事件 )

最新推荐文章于 2022-08-10 22:48:47 发布

lp1996817

最新推荐文章于 2022-08-10 22:48:47 发布

阅读量180

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lp1996817/article/details/82917687

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的事件流，包括事件冒泡和事件捕获，以及DOM2级事件流。同时，讲解了事件处理程序的四种方式：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序和IE事件处理程序。此外，还阐述了事件对象在DOM和IE中的差异，并列举了多种事件类型，如UI事件、鼠标事件、键盘事件等。最后讨论了事件委托和内存性能优化策略。

摘要由CSDN通过智能技术生成

事件流

事件流描述的是页面中元素触发事件时，接收事件的顺序，IE 提出了冒泡事件流，NetScape 则提出了捕获事件流

1. 事件冒泡

IE 的事件流叫做事件冒泡，即事件是从最具体的元素开始，逐渐向上冒泡到祖先元素

事件冒泡

2. 事件捕获

NetScape 提出的事件流叫做事件捕获，即事件从不具体的元素开始，直到具体的触发元素，其旨在事件到达目标元素之前将其截获

事件捕获

3. DOM 事件流

DOM2级事件规定事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段

在 DOM事件流中，实际的目标元素 在 捕获阶段 不会接收到事件，下一个阶段是处于目标元素，这阶段在事件处理中被当成冒泡阶段的一部分，然后冒泡阶段发生

DOM事件流

尽管 DOM2级规范规定捕获阶段不应该涉及目标元素，但 高版本浏览器都会在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件

事件处理程序

1. HTML 事件处理程序

<script>
	function show(){
		......
	}
</script>
<input type="button" onclick="show()"/>

上述代码在按钮被点击时就会调用，这种绑定事件的方式首先会创建一个封装这元素属性值的函数，这个函数内部有一个局部对象 event，可以 访问到事件触发时的事件对象，这个对象不用自己定义或者从参数列表中获取，并且该函数内部的 this 值指向触发事件的元素

不建议在HTML中绑定事件

2. DOM0 级事件处理程序

每个元素都有自己的事件处理程序属性( onclick… )，所以传统的通过 JS 添加事件处理函数的方式就是，将一个函数赋值给一个事件处理程序属性

oDiv.onclick = function(){
	......
}

使用 DOM0级方法指定处理函数被认为是元素的方法，这时候事件处理程序是在元素的作用域中运行，即函数的 this 指向元素本身

以这种方式添加的处理函数会在冒泡阶段被处理，也可以将其设置为 null 来移除处理函数

3. DOM2级事件处理程序

DOM2级事件定义了两个方法： addEventListener()、removeEventListener()，两个函数都可以接收 3 个参数，要处理的事件名( 事件程序属性去掉 on )、处理函数、一个布尔值，可以添加多个事件监听函数，事件触发时按照添加顺序执行

第三个参数为 true ，则表示在捕获阶段调用事件处理程序，为 false ，则表示在冒泡阶段调用处理程序

通过 addEventListener() 添加的处理函数只能由 removeEventListener() 来移除，移除时传入的参数与添加时的处理函数相同，这意味着添加的匿名函数无法被移除

大多数情况下，都是将事件添加到冒泡阶段，这样可以最大限度的兼容各种浏览器

4. IE 事件处理程序

IE 中相似的两个方法是 attachEvent()、detachEvent()，两个方法都接收两个参数，事件名、处理函数，事件名和元素的事件程序属性一致( onclick… )，也可以添加多个处理函数，触发时按照添加顺序反序执行

attachEvent() 和 DOM0级事件绑定的区别在于，attachEvent() 的处理函数作用域是全局的( this 指向 window )，而不是目标元素

事件对象

1. DOM 中的事件对象

无论使用什么方法 DOM0级或者 DOM2级方式指定事件处理函数，都会传入 event 对象( 事件处理函数最多只能接收一个参数，即为 event 对象 )

DOM0： xx.onclick = function(event){ ... }
DOM2： xx.addEventListener('click', function(event){ ... }, false)

也可以不显示指定 event 对象传参，函数内部依然可以直接使用
DOM0： xx.onclick = function(){ ... }
DOM2： xx.addEventListener('click', function(){ ... }, false)

所有事件类型的事件对象都有的属性、方法：

属性/方法	类型	读/写	说明
`bubbles`	Boolean	只读	事件是否冒泡
`cancelable`	Boolean	只读	是否可以取消冒泡
`currentTarget`	Element	只读	事件处理程序当前正在处理事件的元素
`defaultPrevented`	Boolean	只读	是否调用了 `preventDefault`( DOM3新增 )
`detail`	Integer	只读	与事件相关的细节信息
`eventPhase`	Integer	只读	调用处理函数的阶段，1: 捕获、2: 处于目标、3: 冒泡
`preventDefault()`	Function	只读	取消事件默认行为
`stopImmediatePropagation()`	Function	只读	取消事件进一步捕获、冒泡，同时阻止任何事件处理程序被调用( DOM3新增 )
`stopPropagation()`	Function	只读	取消事件进一步捕获、冒泡
`target`	Element	只读	事件的目标元素
`trusted`	Boolean	只读	`true` 表示为浏览器生成，反之表示由开发人员通过 JS 生成( DOM3新增 )
`type`	String	只读	触发的事件类型
`view`	AbstractView	只读	指向 window

target vs currentTarget：

<div> <span>123</span> </div> 为div 绑定了点击事件

当 span 元素被点击时，触发点击事件，然后冒泡到 div，div 的点击事件被触发，此时 event 对象的 currentTarget 就指向 div，target 指向 span

即 currentTarget 为事件处理函数触发时所在的对象( 因为可能捕获下去，或者冒泡上来，触发当前元素的相应事件 )，target 为触发事件的元素，当该元素也绑定了事件的时候，这两个的值是相等的，都指向触发事件的元素

在处理函数内部，this 值始终指向 currentTarget 元素，因为它是处理函数的作用元素

2. IE 中的事件对象

访问 IE 中的 event 对象取决于使用什么方式绑定处理函数，使用 DOM0级方式绑定，则 event 对象作为 window的一个属性存在，使用 window.event 来获取，使用 attachEvent 绑定则作为一个参数传入

DOM0：
	xx.onclick = function() { var event = window.event }

attachEvent：
	xx.attachEvent("onclick",function(event){ ... })

IE 中 event 对象都有的属性、方法：

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为 `false`，设置为 `true` 即可取消冒泡
returnValue	Boolean	读/写	默认为 `true`，设置为 `false` 即可阻止默认行为
srcElement	Element	只读	事件触发的元素，参考 `target`
type	String	只读	触发的事件类型

事件类型

DOM3级规定了以下几类事件：

UI事件：用户与界面发生交互时触发
焦点事件：元素获得或者失去焦点时触发
鼠标事件
滚轮事件
文本事件：在文档中输入文本时触发
键盘事件
变动事件：底层 DOM 结构发生变化时触发

1. UI 事件

load：页面完全加载后在 window 对象上触发、图像加载完成后在 img 元素上触发
unload：页面完全卸载后在 window 对象上触发
error：发生 JS 错误时在 window 对象上触发、无法加载图片时在 img 元素上触发、
select：用户选择文本框( input 或者 textarea )中的一个或多个文字时触发
resize：窗口大小变化时在 window 对象上触发
scroll：当用户在带滚动条的元素上滚动时，在该元素上触发

1. load

当页面完全加载完毕( 包括所有图像、JS文件、CSS文件等外部资源 )，才会触发 window 的 load 事件

新图像元素不一定要从添加到文档后才开始下载，只要设置了 src 属性就会开始下载

高版本浏览器中， script 标签也支持 load 事件，只有为 script 标签设置了 src 属性，并且添加到文档中后，才会开始下载

2. unload

这个事件在文档被 完全卸载 之后触发，只要用户从一个页面跳转到另一个页面，这个事件就会被触发

2. 焦点事件

blur：元素失去焦点时触发，不会冒泡
focus：元素获得焦点时触发，不会冒泡
focusin：元素获得焦点时触发，与 focus 等价，冒泡
focuseout：元素失去焦点时触发，与 blur 等价，冒泡

从页面中一个元素移动到另一个元素，会依次触发以下事件：

focusout，在失去焦点的元素上触发
focusin，在获得焦点的元素上触发
blur，在失去焦点的元素上触发
DOMFocusOut( opera)，在失去焦点的元素上触发
focus，在获得焦点的元素上触发
DOMFocusIn( opera )，在获得焦点的元素上触发

3. 鼠标与滚轮事件

DOM3级事件定义了 9 个鼠标事件：

click：用户单击 主鼠标( 左键 ) 或者 按下回车键时触发( 需要获得焦点 )
dblclick：用户双击 主鼠标 时触发
mousedown：用户按下任意鼠标按钮触发
mouseenter：鼠标首次移动到元素范围内触发，不冒泡
mouseleave：鼠标移动到元素范围之外时触发，不冒泡
mousemove：鼠标指针在元素范围内移动时触发
mouseout：鼠标指针位于一个元素上方，将其移入另一个元素时触发
mouseover：鼠标指针位于一个元素外部，首次移入另一个元素边界之内时触发
mouseup：用户释放鼠标按钮时触发

mouseover/out  VS  mouseenter/leave

1. mouseover/out 会冒泡，而 mouseenter/leave 则不会冒泡
2. 从外部移入到子元素时，会触发 子元素的 mouseover 和 本身的 mouseenter
3. 从外部移入到元素内时，先触发 mouseover，后触发 mouseenter；离开时先触发 mouseout，后触发 mouseleave
4. 从元素内部移入到子元素时，会触发 子元素的 mouseover 和 自身的 mouseout
5. 从子元素移入到元素内部时，会 触发 子元素的 mouseout 和 自身的 mouseover

只有在同一个元素上相继触发 mousedown、mouseup 事件，才会触发一次 click 事件，如果 mousedown、mouseup 中的一个被取消，就不会触发 click 事件

类似，只有连续触发了两次上述循环( 触发两次 click 事件 )，dblclick 事件才会被触发一次

它们的触发顺序始终如下：

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

1. 客户区坐标位置

鼠标事件都是在浏览器视口的特定位置发生的，这个位置信息保存在 event 事件对象的 clientX 和 clientY 两个属性上，它们分别表示鼠标事件发生时，鼠标光标距离可视区( 不包括滚动的距离 ) 的左侧和上方的距离

2. 页面坐标位置

通过 clientX 和 clientY 两个属性可以知道，鼠标在位于可视区的什么位置产生了事件，而通过 pageX 和 pageY 这两个属性，则可以知道鼠标位于页面的什么位置产生了事件( 包括滚动距离 )

即 pageX 和 pageY 相当于 clientX + scrollLeft 和 clientY + scrollTop

3. 屏幕坐标位置

screenX 和 screenY 两个属性可以确定事件发生时，鼠标距离屏幕左侧和上方的距离

event.screenX、event.screenY

4. 修改键

shift、ctrl、alt、meta( windows: windows、mac: cmd ) 这四个修改键允许我们在其按下时触发鼠标事件的不同行为( 采取不同的操作 )，DOM 规定了四个属性来表示它们的状态： shiftKey、ctrlKey、altKey、metaKey，触发事件时其被按下则相应的属性为 true，否则为 false

IE8 及之前不支持 metaKey 属性

5. 相关元素

因为 mouseover 和 mouseout 两个事件会涉及到其他元素，所以 event 对象有一个 只对这两个事件 才有值的属性： relatedTarget，这个属性保存了相关元素的信息，对于其他事件，这个属性的值为 null

IE8及之前提供了 fromElement ( mouseover ) 和 toElement ( mouseout ) 属性来保存相同的信息

对于 mouseover 来说，事件的主目标是获得光标的元素，所以 relatedTarget 指向失去光标的元素

对于 mouseout 来说，事件的主目标是失去光标的元素，所以 relatedTarget 指向获得光标的元素

6. 鼠标按钮

对于 mousedown 和 mouseup，事件对象提供了一个 button 属性来判断用户按下或者释放了哪一个鼠标按钮，其中，0 代表主属性按钮，1 表示按下了中间的滑轮按钮， 2 表示按下了次鼠标按钮

7. 事件详细信息

事件对象的 detail 属性可以表示鼠标事件在该元素的当前位置发生了多少次( click 触发一次算一次单击 )，在 mousedown 和 mouseup 触发的中间移动了位置，则 detail 属性重置为 0

8. 鼠标滚轮事件

当用户通过鼠标滚轮与页面交互，在垂直方向上滚动页面时，就会触发 mousewheel 这个事件。

这个事件的事件对象会包含一个 wheelDelta 属性，当用户向前滚动滑轮时，这个属性的值是 正数( 120的倍数 )，向后滚动滑轮时，这个属性的值是 负数( -120的倍数 )

9. 触摸设备

***对于移动设备：

不支持 dblclick 事件
轻击可单击元素( 单击可产生默认操作的元素如按钮、链接等，或者已经制定了 click 事件的元素 ) 会触发 mousemove 事件，若因此导致内容变化，则不会再触发其他事件；如果屏幕没有因此变化，则会相继触发 mousedown、mouseup、click 事件
mousemove 事件也会触发 mouseover 和 mouseout 事件
两个手指放在屏幕上，且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件