day07 js 事件流

114 阅读1分钟

一、事件捕获

从DOM根元素开始执行对应的事件(从外到里)
事件捕获需要写对应代码看效果
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明:

  • addeventlistener第三个参数传入true代表是捕获阶段触发(很少使用)
  • 若传入false代表冒泡阶段触发,默认就是false
  • 若是用L0事件监听,则只有冒泡阶段,没有捕获

image.png
从document依次往下执行最终到div son

二、事件冒泡

image.png
同名事件

三、阻止冒泡

默认有冒泡模式存在,容易导致事件影响父级元素
把事件限制到当前元素内,就需要阻止事件冒泡
前提:阻止事件冒泡需要拿到事件对象
语法:事件对象.stopPropagation()
注意:此方法可以阻断时间流动传播,不光在冒泡阶段有效,捕获阶段也有效

四、解绑事件

L0事件解绑
image.png
L2事件解绑
image.png
不许使用匿名函数,要给函数起名字

五、鼠标经过

image.png

六、两种区别

image.png

七、事件委托

image.png
事件委托只需要获取父元素
事件委托适用于简洁情况,比如div套一个li,一个a,而不适用于层层嵌套。

image.png
事件对象e.target.targetname 判断是否是某个对象

八、阻止冒泡

image.png

image.png

九、页面加载事件

js写在body上面的时候需要使用页面加载
image.png

image.png

十、页面滚动

ScrollLeft 和 ScrollTop 可读写,可赋值 是数值型

image.png

image.png

image.png

image.png

十一、页面大小

image.png

image.png image.png

image.png

image.png