1.事件委托
- 后代元素把事件委托给祖先元素，但是必须要明确是哪个后代
- ul > li
新添加的元素事件不容易添加
事件委托能提升代码的性能
let ulEl = document.querySelector("ul");
ulEl.addEventListener("click", function (ev) {
// 点击 ul 的徒子徒孙都会触发 ul 的点击事件
if (ev.target.classList.xxx) {
// 执行相应逻辑;
}
});2.阻止事件冒泡和阻止默认行为
阻止冒泡是就让事件不再从子级向父级【传播】
在事件回调函数中通过 ev.stopPropagation()
一些标签自带了某些功能，比较典型的两个：a 标签 和 form 标签
事件回调中的 ev.preventDefault()
扩展：如果在 a 中看到了 <a href="javascript: ;">删除</a>
含义是不想让 a 去跳转
3.滚动事件
scroll 事件与 click input change keyup 等,没有什么本质上的区别。
- scroll 是在【页面】或【盒子】发生滚动的时候被触发
- 页面的 document.addEventListener('scroll', function ( ) { })
- 盒子的 盒子DOM.addEventListener('scroll', function ( ) { })
- 注：当滚动事件发生时，一般是给某个父盒子进行监听。
4.加载事件
load 事件与 click input change keyup 等,没有什么本质上的区别。
- 页面的 load 事件是指页面加载完毕（页面全部标签都生成了）后才去触发
window.addEventListener("load", function () {});- 注：load 是指页面的【资源】完全加载完毕，如外部引入的 css 图片、字体等完成下载完成后才会执行。
5.元素尺寸和位置
offset 家族
offsetWidth、offsetHeight 大小的确定 width + padding + border
offsetLeft、offsetTop 位置的确定与定位有关（参照谁进行定位，位置就参照谁）
- 如果盒子的所有祖先都没有定位，那么参照页面
client 家族
clientWidth、clienttHeight 大小的确定 width + padding - 滚动条宽度
clientLeft、clientTop 实际就是边框的宽度
scroll 家族
只有盒子或页面发生滚动时它才有意义，如果没有滚动我们永远不会使用它。
-
scrollWidth、scrollHeight 大小的确定取决滚动内容的大小
-
scrollTop、scrollLeft 是指页面或盒子滚动的距离