事件流
捕获 冒泡
事件流是指事件完整执行过程中的流动路径
事件捕获概念
从DOM的根元素开始去执行对应的事件
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
.addEventListener第三个参数传入true代表捕获阶段触发(很少使用)一层一层流动
若传入false代表冒泡阶段触发,默认false
若是用L0事件监听,则只有冒泡阶段,没有捕获 L0是原始注册事件,L2是.addEventListener
事件冒泡概念
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,从下往上冒泡,依次向上调用所有父级元素的同名事件
阻止冒泡
因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,把事件就限制在当前元素内
语法:事件对象.stopPropagation()
e.stopPropagation()
此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
解绑事件
L0
on事件方式,直接使用null覆盖就可以实现事件的解绑
btn.οnclick=funtion(){
}
解绑
btn.οnclick=null
只能运行一次
btn.οnclick=funtion(){
btn.οnclick=null
}
L2
function fn(){
}
checkall.addEventListener('click',fn)
checkall.removeEventListener('click',fn)
匿名函数无法被解绑
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
鼠标经过事件的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
注册事件
传统on注册L0
同一个对象,后面注册的事件会覆盖前面注册
直接使用null覆盖就可以解绑
都是冒泡阶段执行
事件监听L2
后面注册的事件不会覆盖前面注册的事件
可以调参确实冒泡还是捕获阶段执行
必须用removeEventListener()
匿名函数无法被解绑
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,提高程序性能
原理:事件委托其实是利用事件冒泡的特点
给父元素注册事件,当触发子元素时,会冒泡到父元素身上,从而触发父元素的事件
实现:事件对象.target.tagName可以获得真正触发事件的元素
<ul>
<li>第1飞</li>
<li>第2飞</li>
<li>第3飞</li>
<li>第4飞</li>
<li>第5飞</li>
</ul>
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
e.target.style.color='red'
})
阻止冒泡
阻止默认行为
<a href="">dian</a>
e.stopPropagation()
const a=document.querySelector('a')
a.addEventListener('click',function(e){
e.preventDefault()
})
页面加载事件
1
加载外部资源(如图片,外联css和js)加载完毕时触发的事件
场景:有时要等页面资源全部处理完了做一些事情
老代码js在head中,直接找dom找不到
事件名:load
监听页面所有资源加载完毕
window指整个页面
window.addEventListener('load',function(){})
也可以单个资源加载load事件
2
当初始的HTMlL文档被完全加载和解析完成之后,DOMContentLoaded事件会被触发,而无需等待样式表,图像等完全加载
document.addEventListener('DOMContentLoaded',function(){})
页面滚动事件
滚动条在滚动的时候持续触发
事件名:scroll
监听整个页面滚动
window或document加都行
window.addEventListener('scroll',function(){
console.log('klkl')
})
scrollLeft和 scrollTop
获取被卷去的大小
获取元素内容从左,往上滚出去看不到的距离
这两个值是可读写的
const a=document.querySelector('div')
a.scrollTop
滚动显示或隐藏
window.addEventListener('scroll',function(){
const n =document.documentElement.scrollTop
if(n>100)
{
div.style.display='block'
}
else{
div.style.display='none'
}
})
document.documentElement HTML文档返回对象为HTML元素
const n =document.documentElement.scrollTop是数字型不带单位
可以默认,可读写document.documentElement.scrollTop
document.documentElement.scrollTop=800
scrollTo()方法可以把内容滚动到指定的坐标
语法:
元素.scrollTo()
window.scrollTo(0,1000)
页面尺寸事件
会在窗口尺寸改变的时候触发
window.addEventListener('resize',function(){
console.log(1)
})
获取宽高
获取元素的可见部分宽高 (不包含变宽,margin,滚动条)
clientWidth和clientHeight
const a=document.querySelector('div')
a.clientWidth
元素尺寸位置-尺寸
获取宽高:
获取元素的自身宽高,包含元素自身设置的宽高,padding,border
offsetWidth和offsetHeight
获取出来的是数值
注意:获取的是可视宽高,如果盒子是隐藏的,结果为0
获取位置:
获取元素距离自己定位父级元素的左,上距离
offsetLeft和offsetTop是只读属性
获取元素尺寸于位置-尺寸
获取位置:
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置//就是移动了视口也会变
scroll-behavior
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。
scroll-behavior: smooth;
scroll-behavior: auto;
css
//让滚动条丝滑滚动
html{
scroll-behavior: smooth;
}
属性选择器--只选了input 里面有value属性的标签
css
input[value]
{
color:red;
}
<input type="text" value="123">
<input type="password" >
或者
input[type=text]
{
color:red;
}
css
/* table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th{
background-color: #09c;
font:bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td{
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck{
width: 80px;
}
.clk:checked{
width: 30h;
height: 30px;
}
.all{
margin-left: 10px;
} */
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/my.css">
<title>Document</title>
</head>
<body>
<!-- <table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" class="clk"><span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" id="" class="ck clk">
</td>
<td>小米时间</td>
<td>设定</td>
<td>¥3333</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" id="" class="ck clk">
</td>
<td>小米时2间</td>
<td>设定</td>
<td>¥33343</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" id="" class="ck clk">
</td>
<td>小米时3间</td>
<td>设定</td>
<td>¥33333</td>
</tr>
</table> -->
<!-- <ul>
<li>第1飞</li>
<li>第2飞</li>
<li>第3飞</li>
<li>第4飞</li>
<li>第5飞</li>
<p>dldada</p>
</ul>
<a href="">dian</a> -->
<script src="./js/my.js">
</script>
</body>
</html>
js
// const checkall=document.querySelector('#checkAll')
// const cks=document.querySelectorAll('.ck')
// checkall.addEventListener('click',function(){
// for (let i = 0; i < cks.length; i++)
// {
// cks[i].checked=checkall.checked
// }
// })
// checkall.removeEventListener('click',fn)
// for (let i = 0; i < cks.length; i++) {
// cks[i].addEventListener('click',function(){
// checkall.checked=document.querySelectorAll('.ck:checked').length===cks.length
// })
// }
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
if(e.target.tagName==='LI')
e.target.style.color='red'
})
const a=document.querySelector('a')
a.addEventListener('click',function(e){
e.preventDefault()
})
window.addEventListener('resize',function(){
console.log(1)
})