Dom 事件详解

xiaokai 发布于2019-08-30 15:56 / 2927人阅读

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。

事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。

DOM 事件级别

DOM 级别分为四个级别：DOM0 级、DOM1 级、DOM2 级、DOM3 级；

DOM 事件级别分为三个级别：

DOM0 级事件

缺点：无法设置多个事件处理函数

DOM2 级事件

可以为事件设置多个事件处理函数，可以通过第三个参数 ( useCapture ) 设置在什么阶段执行事件处理函数，默认是 false， 即在事件冒泡阶段执行事件处理函数。

需要注意的是在 IE8 及以下版本需要用 attachEvent 和 detachEvent 实现，只有两个参数，事件名需要以 on 开头，只支持在事件冒泡阶段执行事件处理函数。

DOM3 级事件

DOM3 级事件是在 DOM2 级事件的基础上添加了更多的事件类型，允许自定义事件。

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

// 自定义事件
var event = new Event("test")
// 给元素绑定事件
domElement.addEventListener("test", function() {
    console.log("event test")
},)

// 触发事件
setTimeout(function() {
    domElement.dispatchEvent(event)
}, 1000)

DOM 事件流

想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不仅仅是一个圆，而是纸上的所有圆。所以如果点击了某个按钮，点击事件不仅仅发生在这个按钮上，整个页面也被点击了。

事件流又称为事件传播，描述的是从页面中接收事件的顺序。DOM2 级事件规定事件流包括三个阶段: 事件捕获(capturing phase)、目标事件(target phase)、事件冒泡(bubbling phase)。

发生的顺序是：事件捕获阶段 --> 目标事件阶段 --> 事件冒泡阶段

事件冒泡

事件开始时由最具体的元素(目标元素)接收，然后逐级向上传播。




  目标元素
  父级元素

运行结果：

事件捕获

事件按 window -> document -> html -> body -> ... -> 目标元素 的方向向下层元素传递。




  目标元素
  父级元素

运行结果：

![bubbling](https://user-gold-cdn.xitu.io...
)

事件对象参数 event

在用户触发事件，执行事件处理函数的时候，默认会向事件处理函数传入一个 event 对象，它记录了该事件的状态和行为。

event 常用属性和方法

type 事件类型

target 事件发出者(触发事件的元素)

currentTarget

事件监听者(被绑定事件的元素)

stopPropagation() 阻止事件冒泡或捕获

preventDefault() 阻止浏览器默认行为

target 、currentTarget 与 this

当点击 parent 时，输出：

1 ...
2 ...
3 ...

当点击 child 时，输出：

1 ...
2 ...
3 ...

所以 target 是事件发出者，curentTarget 是事件监听者，事件处理函数中的 this 等同于 e.currentTarget

event 对象的一些兼容性写法

获得 event

// 事件处理函数
function handleClick(event) {
    var e = event || window.event
    ···
}

获得 target

···
var target = e.target || e.srcElement
···

阻止浏览器默认行为

···
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
···

阻止冒泡

···
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
···

事件绑定与解绑

function addEvent(element, type, fn) {
    element.addEventListener ? element.addEventListener(type, fn, false) : element.attachEvent("on"+ type, fn)
}

function removeEvent(element, type, fn) {
    element.removeEventListener ? element.removeEventListener(type, fn, false) : element.detachEvent("on"+ type, fn)
}

属性表

基础属性

属性	描述
altKey	返回当事件被触发时，”ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
metaKey	返回当事件被触发时，”meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。

IE 属性

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 false 可以阻止浏览器默认行为
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 event 属性（2级 DOM 事件标准定义的属性）

属性或方法	描述
bubbles	返回布尔值，指示事件是否是冒泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件（常用于阻止事件冒泡）。

阅读原文

参考资料：

事件流理解

javascript event（事件对象）详解

DOM 事件深入浅出（一）

云服务器 GPU云服务器 DOM详解 DOM事件 dom事件管理 dom事件冒泡

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

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

Dom 事件详解

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。 DOM 事...

CodeSheep 2019-08-02 14:27 评论0 收藏0
Dom 事件详解

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。 DOM 事...

DevTalking 2019-08-26 13:34 评论0 收藏0
JavaScript学习总结（九）事件详解

摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...

LiveVideoStack 2019-08-21 10:21 评论0 收藏0
JavaScript系列之事件详解

摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门事件 JavaScript与HTML之间的交互是通过事件实现的...

pakolagij 2019-08-21 17:16 评论0 收藏0
js事件详解

摘要：使用级方法指定的事件处理程序被认为是元素的方法。用于立即停止事件在中的传播，取消进一步的事件捕获或冒泡。捕获事件目标对象冒泡只有在事件处理程序执行期间，对象才会存在，执行完成后，对象就会被销毁。引用事件是我认为前端最特别的地方，这是唯一其他语言不一样的地方，我们通过它与页面进行交互。事件流事件流描述的是从页面中接收事件的顺序。IE和网景团队提出流相反的事件流概念。IE事件流是事...

AlienZHOU 2019-08-20 17:22 评论0 收藏0