事件

最新推荐文章于 2023-12-04 20:34:37 发布

Yunruohan

最新推荐文章于 2023-12-04 20:34:37 发布

阅读量109

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/titoni_yunruohan/article/details/111568554

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

一、事件冒泡

观察dom结构，我们会发现每个元素都被其它元素包裹着，像同心圆一样，当圆心有事件发生的时候，似乎会向外扩散，这里我们可以把这种扩散理解为事件冒泡

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
举例理解：

<!DOCTYPE html>
<html>
<head>
    <title>理解冒泡实例</title>
</head>
<body>
    <div id="myDiv">
        click me
    </div>
</body>
</html>

图示：从图中我们可以看出，事件冒泡是由下而上的

二、事件捕获

事件捕获：事件捕获是由最外层的节点先接收到click事件，然后沿着dom树一直向下，直到事件绑定的元素
图示：

三、DOM事件流

dom2级事件规定，事件流包括三个阶段：事件捕获阶段、目标事件发生阶段、事件冒泡阶段

四、事件类型

1.UI事件

load事件：当页面的所有资源加载完毕之后就会触发window上面的load事件

添加方式一

在<script></script>中写入

EventUtil.addHandler(window, 'load', function(event) {

alert('xxx')

})

添加方式二

body或者img标签可以帮到onLoad事件

unload事件

EventUtil.addHandler(window, 'onload', function(event) {

alert('xxx')

})

resize事件

EventUtil.addHandler(window, 'resize', function(event) {

alert('xxx')

})

scroll

EventUtil.addHandler(window, 'scroll', function(event) {

alert('xxx')

})

2.焦点事件

blur事件：元素失去焦点的时候触发，事件不会冒泡
focus事件：元素获得焦点的时候触发，事件不会冒泡

3.鼠标与滚轮事件

click事件：鼠标单击
dbclick事件：鼠标双击事件
mousedown事件：用户按下鼠标任意键，键盘不可触发
mouseenter事件：鼠标光标从元素外部首次移动到元素范围之内触发
mouseleave事件：在位于元素上方的鼠标光标移动到元素范围之外触发
mousemove事件：当鼠标指针在元素内部移动时重复的触发，不能通过键盘事件触发
mouseout事件：在鼠标指针位于一个元素上方，然后将其移入另外一个元素的时候触发
mouseover事件：在鼠标指针位于一个元素外部，然后用户将其首次移入另外一个元素边界之内触发，不能通过键盘触发
mouseup事件：用户释放鼠标按钮时触发，不能通过键盘事件触发

上述mousedown，mouseup，click，dbclick的触发顺序如下mousedown，mouseup，click，mousedown，mouseup，click，dbclick

五、事件对象

每个事件在定义后都会有一个默认的参数event对象

bubbles：表面事件是否冒泡
cancelable：表面是否可以取消事件的默认行为
currentTarget：其事件处理程序当前正在处理事件的那个元素
preventDefault()：取消事件的默认行为，cancelable为true的时候可以使用
stopImmediatePropagation()：取消事件的进一步捕获或冒泡，同时阻止事件正在被调用
stopPropagation()：取消事件进一步捕获或冒泡，在bubbles为true的时候可以使用
target：事件的目标

Yunruohan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

一、事件冒泡观察dom结构，我们会发现每个元素都被其它元素包裹着，像同心圆一样，当圆心有事件发生的时候，似乎会向外扩散，这里我们可以把这种扩散理解为事件冒泡事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点举例理解：<!DOCTYPE html><html><head> <title>理解冒泡实例</title></head><body> <div id=
复制链接

扫一扫