事件
事件流指的是事件完整执行过程中的流动路径。从父到子是捕获，从子到父是冒泡。
两个阶段：捕获、冒泡
事件捕获（了解）
事件冒泡
当一个元素的事件被触发时，同样的事件将会再该元素的所有祖先元素中依次被触发。简单来说：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。
事件冒泡是默认存在的。
阻止冒泡
因为默认有冒泡模式的存在，所以容易导致事件影响到父级元素。若要把事件限制在当前元素内，就要阻止事件冒泡。
事件对象.stopPropagation() //此方法可以阻断事件流动传播，既可以阻止冒泡也可以阻止捕获。
e.stopPropagation()
解绑事件
on事件方法，直接使用null覆盖就可以实现事件的解绑。**匿名函数无法解绑**。
语法：
//绑定事件
btn.onclick = function() {
alert('点击了')
}
//解绑事件
btn.onclick = null
addEventListener方式，必须使用：removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
事件委托
如果同时给多个元素注册事件，之前我们是通过for循环来实现的。
事件委托是利用事件流的特征解决一些开发需求的知识技巧。
优点：减少注册次数，提高程序性能。
原理：利用事件冒泡的特点：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。
如何找到真正触发的元素？：事件对象.target.tagName
mouseenter是没有冒泡效果的 不能用事件委托
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<p>我不需要变色</p>
</ul>
<script>
//点击每个小li 当前li文字变为红色
//事件委托
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
console.log(e.target);
// e.target.style.color = 'red' 这个p和li都会添加点击事件
//点击li有效果，点击p不能有效果
console.dir(e.target) //打印对象用dir
if (e.target.tagName === 'LI') { //标签名
e.target.style.color = 'red'
}
})
</script>
</body>
阻止元素默认行为
某些情况下需要阻止默认行为的发生，如阻止链接的跳转，表单域跳转。
语法：
事件对象.preventDefault()
e.preventDefault()
其他事件
页面加载事件
- load
加载外部资源（如图片、外联CSS、js等）加载完毕时触发的事件。
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
//等待页面所有资源加载完毕就回去执行回调函数
window.addEventListener('load',function(){})
不仅可以监听整个资源，也可以针对某个资源绑定load事件。
- DOMContentLoaded
当初始的HTML文档被完全加载和解析完成后，该事件被触发，而无需等待样式表、图像等完全加载。
监听页面DOM加载完毕:
给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){})
元素滚动事件
滚动条在滚动的时候持续触发的事件。
事件名：scroll
监听整个页面滚动
//给window或document或某个元素添加
window.addEventListener('scroll',function(){})
- 页面滚动事件——获取位置
scrollLeft和scrollTop（装文字的盒子向上移动了多少px）属性：获取被卷去的大小，获取元素内容往左、往上滚出去看不到的距离，返回一个数字型数据，不带单位。这两个值是可读写的（可以读取数据也可以为其赋值，赋值时不带单位）。
-页面滚动事件——滚动到指定的坐标
scrollTo()方法
元素.scrollTo(x,y)
window.scrollTo(x,y)
尺寸事件
- 在窗口尺寸改变的时候触发事件：
resize事件 - 检测屏幕宽度
clientWidth 和 clientHeight获取元素的可见部分宽高（不包含边框、margin、滚动条等）
元素尺寸与位置
- 获取宽高
offsetWidth和offsetHeight
获取元素的自身宽高、包含元素自身设置的宽高、padding、border。 - 获取位置
sffsetLeft和offsetTop 只读属性
受父亲元素的影响，如果父亲有定位，得到的是距离父亲的位置
获取元素距离自己定位父级元素的左、上距离。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
