DOM04~
事件对象及属性
事件对象
事件流
事件委托
综合案例
事件对象
获取事件对象
事件对象常用属性
什么是事件对象?
1.1 也是个对象,这个对象里有事件触发时的相关信息
1.2 例如鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
如何获取
2.1 在事件绑定的回调函数的第一个参数就是事件对象
2.2 一般命名为 event、ev、e
2.3 元素.addEventListener('click', function(e --> 事件对象) {})
事件对象常用属性
type 当前的事件类型
pageX/pageY 获取光标相对于当前文档左上角的位置
clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
offetX/offsetY 获取光标相对于当前 DOM 元素左上角的位置
key 用户按下键盘键的值 现在不提倡使用 keyCode
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<button>确定</button>
<script>
let btn = document.querySelector('button')
document.addEventListener('mousemove', function(e) {
console.log(e.pageX,e.pageY);
btn.style.left = e.pageX - 20 + 'px'
btn.style.top = e.pageY - 20 + 'px'
})
</script>
</body>
</html>
事件流
事件流与两个阶段说明
事件捕获和事件冒泡
阻止事件流动
什么是事件流?
1.1 事件流指的是事件完整执行过程中的流动路径
1.2 父到子 --> 捕获
1.3 子到父 --> 冒泡
事件捕获
2.1 从 DOM 的根元素开始去执行对应的事件
2.2 代码 DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
true 捕获阶段触发
false 冒泡阶段触发 默认
若使用 L0 事件监听,则只有冒泡阶段,没有捕获阶段
2.3 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">123
<div class="son">123</div>
</div>
<script>
let f = document.querySelector('.father')
let s = document.querySelector('.son')
// 捕获
f.addEventListener('click', function() {
alert('father')
}, true)
s.addEventListener('click', function() {
alert('son')
}, true)
</script>
</body>
</html>
事件冒泡
3.1 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次发生,这一过程称为事件冒泡
3.2 当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
3.3 事件冒泡是默认存在的
3.4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">123
<div class="son">123</div>
</div>
<script>
let f = document.querySelector('.father')
let s = document.querySelector('.son')
// 当一个元素触发事件后,会依次向上调用所有父级元素的 同名事件
f.addEventListener('click', function() {
alert('father')
})
s.addEventListener('click', function() {
alert('son')
})
</script>
</body>
</html>
阻止事件流动
4.1 阻止事件流动需要拿到事件对象
4.2 语法 事件对象.stopPropagation()
4.3 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">123
<div class="son">123</div>
</div>
<script>
let f = document.querySelector('.father')
let s = document.querySelector('.son')
// 当一个元素触发事件后,会依次向上调用所有父级元素的 同名事件
// 阻止事件流动需要拿到事件对象
f.addEventListener('click', function() {
alert('father')
})
s.addEventListener('click', function(e) {
alert('son')
e.stopPropagation()
})
</script>
</body>
</html>
鼠标经过事件
5.1 mouseover 和 mouseout 有冒泡效果
5.2 mouseenter 和mouseleave 没有冒泡效果
5.3 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: red;
}
.son{
width: 250px;
height: 250px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let f = document.querySelector('.father')
let s = document.querySelector('.son')
f.addEventListener('mouseover', function() {
console.log(111);
})
</script>
</body>
</html>
阻止默认行为
6.1 比如链接点击不跳转,表单域的跳转
6.2 语法 e.preventDefault()
6.3 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<script>
let a = document.querySelector('a')
a.addEventListener('click', function(e) {
e.preventDefault()
})
</script>
</body>
</html>
两种注册事件
传统 on 注册(L0)
同一个对象,后面注册的事件会覆盖前面的注册
直接使用 null 覆盖就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册(L2)
后面注册的事件不会覆盖前面注册的事件
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用 removeEventListener (事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
<script>
// 为 父级元素 添加 事件委托
let ul = document.querySelector('ul')
ul.addEventListener('click', function(e) {
e.target.classList.add('active')
})
</script>
</body>
</html>
DOM04~的更多相关文章
- eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- MYSQL进阶学习笔记
MySQL在Linux中的使用: 1.查看mysql在linux的安装版本 mysqladmin –version 2.mysql服务的启动与停止 (1).启动: service mysql star ...
- openEuler 部署Kubernetes(K8s)集群
前言 由于工作原因需要使用 openEuler,openEuler官方文档部署K8s集群比较复杂,并且网上相关资料较少,本文是通过实践与测试整理的 openEuler 22.03 部署 Kuberne ...
- python进阶之路18 os、sys、json模块
os模块与sys模块 os模块主要与操作系统打交道 sys模块主要与python解释器打交道 os模块(重要) os模块主要与代码运行所在的操作系统打交道 import os os.path.spli ...
- OSI七层协议补充与socket套节字
OSI七层协议补充与socket套节字 一.传输层之TCP与UDP协议 TCP与UDP协议都是用来规定通信方式的,数据传输过程中能够遵循的协议有很多其中TCP协议和UDP协议是较为常见的两个. 1.T ...
- JAVA虚拟机14 类加载器
1.简介 Java虚拟机设计团队有意把类加载阶段中的"通过一个类的全限定名来获取描述该类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需的 ...
- StartAllBack使用教程
StartAllBack简介 StartAllBack是一款Win11开始菜单增强工具,为Windows11恢复经典样式的Windows7主题风格开始菜单和任务栏,功能包括:自定义开始菜单样式和操作, ...
- pycharm软件的基本使用、python的注释语法、变量与常量、变量的命名风格、垃圾回收机制、数据类型、数据类型之整型、数据类型之浮点型
一.pycharm软件的基本使用 修改主题背景 修改字体大小 切换解释器 如何新建python文件 创建后缀是py的文件 注意:pycharm的语言 一定要使用英文的 二.python语法注释 (1) ...
- C++并发-同步并发
1.等待事件 std::mutex m; void wait() { std::unique_lock<std::mutex> lk(m); lk.unlock(); std::this_ ...
- 网络继电器的EPICS IOC搭建
http://www.corxnet.com/product/showproduct.php?id=36 https://item.taobao.com/item.htm?spm=a1z10.5-c- ...
- Centos7下areaDetector IOC的编译后记
https://github.com/EPICS-synApps/support/releases synApps出新版了,本文发文时的最新版为:R6-2 Centos7下areaDetector I ...