注册
|
登录
发帖
热搜
活动
交友
discuz
论坛
BBS
翼度工具
翼度网址导航
开发工具
Linux命令速查
网页设计配色表
在线制作icon
颜色代码选取器
翼度科技
»
论坛
›
编程开发
›
JavaScript
›
查看内容
返回列表
发新帖
JavaScript复习——04 事件
卢敏
卢敏
当前离线
积分
24
8
主题
8
帖子
24
积分
新手上路
新手上路, 积分 24, 距离下一级还需 26 积分
新手上路, 积分 24, 距离下一级还需 26 积分
积分
24
发消息
显示全部楼层
事件对象
事件对象是由浏览器在外面触发事件的时候创建的,这个对象封装了各种事件相关的各种信息
例如:
鼠标的位置
键盘的按键
浏览器创建事件对象后,会将事件对象作为响应参数传递
在DOM类型中有多种不同类型的事件对象,但是他们都一个祖先Event
event.clientX:获取鼠标的X轴坐标
event.clientY:获取鼠标的Y轴坐标
event.target:表示
触发事件
的对象
event.currentTarget:
绑定事件
的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM</title>
</head>
<body>
</body>
</html>
复制代码
事件冒泡
事件冒泡:当我们的元素上某个事件被触发
(内部元素不一定要绑定事件)
后,其祖先元素的相同事件也会被触发,冒泡大大的简化了我们代码的编写,但是在某些场景下,我们有时也不希望冒泡
event.stopPropagation():取消事件传导
event.preventDefault():取消事件的默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM</title>
</head>
<body>
</body>
</html>
复制代码
冒泡为什么有利
当我们需要所有元素都有一个共有的事件时,我们如果没有冒泡就需要一个个给他们添加事件
如果我们有冒泡,就只需要给它们的共同祖先元素添加一个事件就可以,这就是冒泡的好处
因为我们自己元素点击之后,事件会向上冒泡,所以父级元素的处理器也会感知到
事件的委托
我们希望,只绑定一次事件,就可以让所有的超链接和未来新添加的都具有这些事件
思路:我们可以将事件统一绑定document,这样点击超链接之后,由于事件的冒泡会导致document的事件被触发,这样就只绑定了一次,所有的超链接都会具有这些事件
但是这也带来了一个问题,
会让除了超链接外的元素也触发事件
委托:就是本该绑定给多个对象的事件,绑定给它们的共同祖先元素,这样就可以降低我们代码的复杂度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM</title>
</head>
<body>
<button type="button" id="btn">
点我一下
</button>
<ul id="list">
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接1</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接2</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接3</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接4</a></li>
</ul>
</body>
</html>
复制代码
处理委托带来的问题
我们之前也说了问题的带来的问题,我们在给共有父元素绑定事件的时候,只要是子元素都有可能触发事件,那么我们如果要选择对应的子元素触发事件呢?
可以用以下的方式来解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM</title>
</head>
<body>
<button type="button" id="btn">
点我一下
</button>
<ul id="list">
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接1</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接2</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接3</a></li>
<li><a target="_blank" href="https://www.cnblogs.com/javascript:;">链接4</a></li>
</ul>
</body>
</html>
复制代码
这上面的代码必须是li才能触发事件,要不然是不能触发事件的
事件的捕获
在DOM中,事件的传播分为三个阶段
捕获阶段
事件的捕获指的是我们的事件
从外向内
传导
由祖先元素向目标元素进行事件的捕获
目标阶段(触发事件的对象)
冒泡阶段
由目标元素想祖先元素进行冒泡
从内向外
传导
如果我们希望在捕获阶段触发事件,那么我们就需要将addEventListener()的第三个参数设置为true
注意
:我们一般不希望在捕获阶段触发事件,设置了捕获事件,
冒泡就会失效
evnet.eventPhase:事件触发的时机
0:表示没有触发事件
1:是捕获阶段
2:表示为目标阶段
3:表示冒泡阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM</title>
</head>
<body>
</body>
</html>
复制代码
来源:
https://www.cnblogs.com/trueasureyuki/p/17822779.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
上一篇:
原型污染
下一篇:
Data对象
发表于 2023-11-12 23:54:44
举报
回复
使用道具
分享
返回列表
发新帖
本版积分规则
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
快速回复
快速回复
返回顶部
返回顶部
返回列表
返回列表