webAPIs学习笔记-3

1.事件流

事件流指的是事件完整执行过程中的流动路径

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

 1.1事件捕获

 从外到里的去执行对应的事件 addEventListener第三个参数传入 true 代表是捕获阶段触发

当我们点击span标签时  三个标签都会触发  触发的顺序的span-> p-> div 从字到父

1.2事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

1.3阻止冒泡

事件对象.stopPropagation()

事件对象就是方法里的传递值  一般设置为e

2.事件解绑

用addEventListener()绑定的事件   使用removeEventListener()来解绑

注意  匿名函数不能解绑！！

所以在声明事件的时候需要把函数写在外面来取名字

 3. 事件委托

利用事件委托可以减少重复代码  把想要设置的事件设置到父级身上 利用事件冒泡来触发子级事件

事件对象e.target  拿到点击的对象

 事件对象e.target.tagName 拿到点击对象的标签名称

  点击切换实例

3.其他事件

3.1页面加载事件 load

标签.addEventListener('load',function(){})

3.2元素滚动事件scroll

tapAll.addEventListener('scroll',function(){})

 scrollTop 元素上面被卷去的长度   scroll.left 左边被卷去的长度

 document.documentElement. scrollTop 整个页面上面被卷去的长度

 document.documentElement就是HTML

3.3窗口改变事件resize

标签.addEventListener('resize',function(){})

clientWidth  clientHeight  获取可见部分的宽高 不包含边框大小

3.4元素的尺寸和位置

元素尺寸

offsetWidth   offsetHeight   获取元素的宽高 包含边框大小

offsetTop offsetLeft  获取元素位置  是离最近一级带定位的祖先的距离