1.事件流
事件流是对事件执行过程的描述,了解事件的执行过程有助于加深对事件的理解,提升开发实践中对事件运用的灵活度。
2.捕获和冒泡
捕获阶段是【从父到子】的传导过程,冒泡阶段是【从子向父】的传导过程。
// 第三个形参加true就是事件捕获
document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
},true)
// 第三个形参加flase就是事件冒泡.
document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
},flase)
// 事件冒泡可以不用加flase,因为默认值就是flase.事件捕获需要加true
3.阻止冒泡
1- 阻止事件冒泡 e.stopPropagation(),仅在自身实现.
2- 阻止网页跳转 e.preventDefault(), a标签和表单有默认跳转和提交,可以用这个阻止跳转和提交.
// 阻止事件冒泡
document.querySelector('.box1').addEventListener('click',function(e){
console.log(2);
e.stopPropagation()
},false)
// 阻止a标签进行网页跳转
document.querySelector('a').addEventListener('click',function(e){
e.preventDefault()
alert('跳转失败了')
})
4.解绑事件(了解即可)
// L0级别写法
box1.onclick = function(){
console.log('注册了事件');
}
box2.onclick = function(){
// 将box1身上的点击事件解绑,dom元素.on事件类名 = null
box1.onclick = null
}
5.事件委托
1- 事件委托的原理: 利用事件冒泡的机制(从里往外)将事件注册委托给父元素.
2- 事件委托的优点: 减少代码量,提高浏览器解析速度.
// 获取ul DOM对象
const ul = document.querySelector('ul')
// 给ul 注册点击事件
ul.addEventListener('click',function(e){
// e.target 指的是事件触发的元素,事件源.tagName 指的是元素名字.
// e.target.tagName === 'LI' 是用排除法将UL/P,给排除了,只有点击LI时,才会触发事件,打印出'hello'
if(e.target.tagName === 'LI'){
console.log('hello');
}
})
6.滚动事件
// 2. 给页面注册滚动事件(重点)
// 2.1页面 window对象或者document对象注册scroll事件
window.addEventListener('scroll',function(e){
// 2.2 监测页面卷去的距离,要设置变量获取这个值
const jin = document.documentElement.scrollTop
// 2.3 当卷起的值大于等于300时,box2这个盒子显示出来,否则就隐藏起来.
if(jin >= 300){
box2.style.display = 'block'
}else{
box2.style.display = 'none'
}
})
7.页面加载事件
加载外部资源(如图片、外联css和JAVAScript等)加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名:load
window.addEventListener('load', function() {
// xxxxx
})
8.页面尺寸事件
会在窗口尺寸改变的时候触发事件
window.addEventListener('resize', function() {
// xxxxx
})