资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Dom 事件详解

Dom 事件详解

xiaokai / 2730人阅读

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

事件是 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 事件深入浅出（一）

超融合服务器 idc机房托管 DOM详解 DOM事件 dom事件管理 dom事件冒泡

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

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

相关文章

  • Dom 事件详解

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

    CodeSheep 评论0 收藏0

  • Dom 事件详解

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

    DevTalking 评论0 收藏0

  • JavaScript学习总结（九）事件详解

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

    LiveVideoStack 评论0 收藏0

  • JavaScript系列之事件详解

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

    pakolagij 评论0 收藏0

  • js事件详解

    摘要：事件流事件流描述的是从页面中接收事件的顺序。其次，必须事先指定所有事件处理程序而导致的访问次数，会延迟整个页面的交互就绪时间。 1.事件流 事件流描述的是从页面中接收事件的顺序。 1.1 事件冒泡 IE中的事件流叫做冒泡，即时间最开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点，直到传播到document对象。例： Event Exampple ...

    BDEEFE 评论0 收藏0

发表评论

登陆后可评论

0条评论

xiaokai

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<