JS-事件委托-阻止事件冒泡和阻止默认行为-滚动事件-加载事件-元素尺寸位置

1.事件委托

2.阻止事件冒泡和阻止默认行为

3.滚动事件

4.加载事件

5.元素尺寸和位置

offset 家族

client 家族

scroll 家族

---

1.事件委托

• 后代元素把事件委托给祖先元素，但是必须要明确是哪个后代
• ul > li

1. 新添加的元素事件不容易添加

2. 事件委托能提升代码的性能

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 是指页面或盒子滚动的距离