1.事件捕获
从DOM的根元素开始去执行对应的事件 (
从外到里
)
语法:
三个参数传入
true
代表是捕获阶段触发
若传入false代表冒泡阶段触发,默认就是false
若是用 L0 事件监听,则只有冒泡阶段,没有捕获
2.事件冒泡
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
事件冒泡是默认存在的
3.阻止冒泡
阻止事件冒泡需要拿到事件对象
语法:
3.1 阻止默认事件的发生
比如 阻止 链接的跳转,表单域跳转
语法:
<body>
<a href="https://www.mi.com/?g_utm=Thirdparty.3601.L1.3.ProductUnion">小米</a>
<script>
document.querySelector('a').addEventListener('click', function (e) {
alert('禁止')
// 禁止默认 事件对象.preventDefault()
e.preventDefault()
})
</script>
</body>
4.解绑事件
L0级别 :
on事件方式,直接使用null覆盖偶就可以实现事件的解绑
直接设置为null
语法:
L2级别 : addEventListener方式,必须使用:
removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
匿名函数无法被解绑
<body>
<button class="a1">提交</button>
<button class="a2">解绑</button>
<script>
const a1 = document.querySelector('.a1')
const a2 = document.querySelector('.a2')
function fn() {
console.log('提交');
}
// a1添加点击事件
a1.addEventListener( 'click' , fn)
a2.addEventListener( 'click',function() {
// 点击a2按钮解绑a1的事件
a1.removeEventListener('click' ,fn)
})
</script>
</body>
4.1鼠标经过事件的 两种区别
鼠标经过事件:
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
5.事件委托
给父元素注册事件 ,里面的子元素也能有事件效果
优点:减少注册次数,可以提高程序性能
原理:事件委托其实是利用事件冒泡的特点。
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
事件对象.target 可以获得真正触发事件的元素对象 事件源
事件对象.target. tagName 可以获得真正触发事件的元素
<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<p></p>
<h1></h1>
</ul>
<script>
// 事件委托的 原理 是利用 事件冒泡的机制,将事件注册 委托给父元素
// 给父元素注册事件
const ul = document.querySelector('ul')
ul.addEventListener('click' , function (e) {
/* console.log(1); */
// 只想给ul 里的li添加事件
// e.target 指的事件触发的元素 即事件源
// console.dir(e.target.tagName); 真正触发事件的元素
if(e.target.tagName === 'LI') {
/* console.log(1); */
}
console.log(e.target.tagName)
console.log(e.target)
})
</script>
</body>
6.页面加载事件
6.1 给windows添加 load 事件
不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
6.2 给页面dom添加 load 事件
总结:
load 事件: 监听整个页面资源给 window 加
DOMContentLoaded : 给 document 加 无需等待样式表、图像等完全加载
7.元素滚动事件 scroll
监听真个页面滚动 给 window 或 document 添加 scroll 事件
8.页面滚动 获取位置 scrollLeft和scrollTop
获取被卷去的大小 都是可以读写的
<body>
<script>
// 1. 需要给 window 对象注册 scroll事件
// 2. 需要 获取 页面 向上滚动的距离 页面指的是 html 标签对象 scrollTop document.documentElement 表示获取 html标签
// console.log(document.documentElement);
window.addEventListener('scroll', function () {
console.log(document.documentElement.scrollTop);
})
</script>
</body>
8.1 页面滚动 滚动到指定的坐标
语法 : 元素.scrollTo(x, y)
9.页面尺寸事件 resize
会在窗口尺寸改变的时候触发事件
10. 页面尺寸事件-尺寸 clientWidth和clientHeight
client 不算边框外边距 只有内容和内边距的大小
<body>
<div class="box"></div>
<script>
// 获取盒子
const box = document.querySelector('.box')
// 获取盒子的高宽
// client 不算边框外边距 只有内容和内边距的大小
console.log(box.clientWidth , box.clientHeight);
</script>
</body>
11. 页面尺寸事件-获取元素宽高 offsetWidth和offsetHeight
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
包含边框
获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
注意是只读属性
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
//获取父盒子距离页面的距离
console.log(document.querySelector('.box').offsetLeft , document.querySelector('.box').offsetTop);
// 获取子盒子 ,若子盒子的父元素有定位 则距离是到父盒子的距离,若父盒子没有定位,则子盒子是到页面的距离
console.log(document.querySelector('.son').offsetLeft , document.querySelector('.son').offsetTop);
</script>
</body>
12. 元素尺寸于位置-尺寸 offsetLeft和offsetTop
获取元素距离自己定位父级元素的左、上距离
注意是只读属性
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
//获取父盒子距离页面的距离
console.log(document.querySelector('.box').offsetLeft , document.querySelector('.box').offsetTop);
// 获取子盒子 ,若子盒子的父元素有定位 则距离是到父盒子的距离,若父盒子没有定位,则子盒子是到页面的距离
console.log(document.querySelector('.son').offsetLeft , document.querySelector('.son').offsetTop);
</script>
</body>
13. 元素尺寸于位置-尺寸 element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置
总结 :
内容
offsetWidt
border
border
bord
borde