DOM 事件进阶
- 事件流
- 事件委托
- 其他事件
- 元素尺寸与位置
一.事件流
- 事件流与两个阶段说明
- 事件捕获
- 事件冒泡
- 阻止冒泡
- 解绑事件
1.1 事件流与两个阶段说明
① 事件流:指的是事件完整执行过程中的流动路径
② 事件流分为捕获阶段和冒泡阶段
1.2 事件捕获
- 从DOM根元素开始去执行对应的事件(从外到里)
- 代码: DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
- 说明:addEventListener第三个参数传入true代表是捕获阶段触发(很少使用),如果不屑,默认就是false,false代表冒泡阶段触发
- 如果用L0事件监听,只有冒泡阶段,没有捕获
1.3 事件冒泡
- 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这一过程被称为事件冒泡
- 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
- 事件冒泡是默认存在的
- L2事件监听第三个参数是false,或者默认都是冒泡
1.4 阻止冒泡
① 问题:如果默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,如果想把事情就限制在当前元素内,就需要阻止事件冒泡
② 阻止冒泡需要拿到事件对象
③ 语法:对象.e.stopPropagation()
④ 此方法可以阻断事件流动传播,不光在冒泡阶段有效,在捕获阶段也有效
1.5 解绑事件
① on事件方式:直接使用null覆盖就可以实现事件的解绑
② addEventListener方式,必须使用 removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡])
const btn = document.querySelector('button')
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// 匿名函数不能解绑
btn.removeEventListener('click', fn)
1.6 鼠标经过事件的区别
- mouseover 和 mouseout 有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
1.7 两种注册事件的区别
① 传统on注册(L0)
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
② 事件监听注册(L2)
- 语法:addEventListener(事件类型,事件处理函数,是否使用捕获机制)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定在冒泡或捕获阶段执行
- 必须使用 removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡])
- 匿名函数无法被解绑
二.事件委托
① 事件委托是利用事件流的特征解决一些开发需求的知识技巧
② 优点
- 减少注册次数,提高程序性能
③ 事件委托:利用事件冒泡的特点,给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<p>无需变色<p>
</ul>
<script>
// 给父元素添加事件,触发子元素
const ul = document.querySelector('ul')
ul.addEventListener('click', function(e) {
// 真正触发元素
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
三.其他事件
3.1 阻止冒泡
① 某些情况下组要阻止默认行为的发生,比如阻止链接的跳转,表单域跳转
② 语法:e.preventDefault()
代码:
<form action="http://www.baidu.com">
<input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com">百度一下</a>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function(e) {
e.preventDefault()
})
const a = document.querySelector('a')
a.addEventListener('click', function(e) {
e.preventDefault()
})
</script>
3.2 页面加载事件
① 概念:加载外部资源,加载完毕时触发的事件
② 为什么要学:
- 有时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把script写到head中,这时候直接找dom元素找不到
③ 事件名:load
④ 监听页面所有资源加载完毕
- 给window添加load事件
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('hello')
})
})
- 不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
⑤ DOMContentLoaded
- 当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,无序等到样式表和图像完全加载
- 事件:DOMContentLoaded
- 给document添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('hello')
})
})
3.3 页面滚动事件
① 滚动条在滚动的时候持续触发的事件
② 很多网页需要检测用户把页面滚动到某个区域之后做一些处理,比如返回顶部或者固定导航栏
③ 事件名:scroll
④ 监听整个页面滚动: 给window或document 添加scroll事件
⑤ 监听某个元素内部滚动直接给某个元素添加即可
// scrollLeft 和 scrollTop
① 获取被卷去的大小
② 获取元素往左,往上滚出去看不到的距离
③ 这两个值都是可读写的
document.documentElement.scrollTop = 800
const div = document.querySelector('div')
window.addEventListener('scroll', function() {
// 必须写到里面,得到的是一个数字型,不带单位
const n = document.documentElement.scrollTop
console.log(n)
if (n >= 100) {
div.style.display = 'block'
} else {
div.style.display = 'none'
}
})
3.4 页面尺寸事件
① 会在窗口尺寸改变的时候触发事件
② resize
const div = document.querySelector('div')
console.log(div.clientWidth)
window.addEventListener('resize', function() {
console.log('hahah')
})
③ 检测屏幕宽度
- 获取元素的可见部分宽高(不包含边框,margin, 滚动条)
- clientWidth和clientHeight
四.元素的尺寸与位置
- 获取宽高
① 获取元素自身的宽和高,包含元素自身设置的宽高,padding,border
② offsetWidth 和 offsetHeight
③ 包含边框
- 获取位置
① 获取元素距离自己定位父级元素的左,上距离文章来源:https://www.toymoban.com/news/detail-645385.html
② offsetLeft和pffsetTop 这两个是只读属性文章来源地址https://www.toymoban.com/news/detail-645385.html
到了这里,关于WebAPIs 第三天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!