元素尺寸与位置

事件进阶实现更多交互的网页特效结合事件流的特征优化事件执行的效率

事件流

事件流是对事件执行过程的描述了解事件的执行过程有助于加深对事件的理解提升开发实践中对事件运用的灵活度。

如上图所示任意事件被触发时总会经历两个阶段【捕获阶段】和【冒泡阶段】。

简言之捕获阶段是【从父到子】的传导过程冒泡阶段是【从子向父】的传导过程。

捕获和冒泡

bodyh3事件流/h3p事件流是事件在执行时的底层机制主要体现在父子盒子之间事件的执行上。

/pdiv

classouterdiv

document.querySelector(.outer);const

inner

document.querySelector(.inner);const

child

document.querySelector(.child);//

html

元素添加事件document.documentElement.addEventListener(click,

function

元素添加事件document.body.addEventListener(click,

function

外层的盒子添加事件outer.addEventListener(click,

function

中间的盒子添加事件outer.addEventListener(click,

function

内层的盒子添加事件outer.addEventListener(click,

function

{console.log(child...)})/script

/body执行上述代码后发现当单击事件触发时其祖先元素的单击事件也【相继触发】这是为什么呢

结合事件流的特征我们知道当某个元素的事件被触发时事件总是会先经过其祖先才能到达当前元素然后再由当前元素向祖先传递事件在流动的过程中遇到相同的事件便会被触发。

再来关注一个细节就是事件相继触发的【执行顺序】事件的执行顺序是可控制的即可以在捕获阶段被执行也可以在冒泡阶段被执行。

如果事件是在冒泡阶段执行的我们称为冒泡模式它会先执行子盒子事件再去执行父盒子事件默认是冒泡模式。

如果事件是在捕获阶段执行的我们称为捕获模式它会先执行父盒子事件再去执行子盒子事件。

bodyh3事件流/h3p事件流是事件在执行时的底层机制主要体现在父子盒子之间事件的执行上。

/pdiv

classouterdiv

document.querySelector(.outer)const

inner

document.querySelector(.inner)//

外层的盒子outer.addEventListener(click,

function

中间的盒子outer.addEventListener(click,

function

第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener

第3个参数为

false事件流只会在父子元素具有相同事件类型时才会产生影响绝大部分场景都采用默认的冒泡模式其中一个原因是早期

不支持捕获

阻止冒泡是指阻断事件的流动保证事件只在当前元素被执行而不再去影响到其对应的祖先元素。

bodyh3阻止冒泡/h3p阻止冒泡是指阻断事件的流动保证事件只在当前元素被执行而不再去影响到其对应的祖先元素。

/pdiv

classouterdiv

document.querySelector(.outer)const

inner

document.querySelector(.inner)const

child

document.querySelector(.child)//

外层的盒子outer.addEventListener(click,

function

中间的盒子inner.addEventListener(click,

function

内层的盒子child.addEventListener(click,

function

借助事件对象阻止事件向上冒泡ev.stopPropagation()})/script

ev.stopPropagation

事件委托是利用事件流的特征解决一些现实开发需求的知识技巧主要的作用是提升程序效率。

script//

document.querySelectorAll(table

button);for(let

元素添加了事件buttons.addEventListener(click,

function

/script利用事件流的特征可以对上述的代码进行优化事件的的冒泡模式总是会将事件流向其父元素的如果父元素监听了相同的事件类型那么父元素的事件就会被触发并执行正是利用这一特征对上述代码进行优化如下代码所示

script//

document.querySelectorAll(table

button);//

document.querySelector(table);parents.addEventListener(click,

function

{console.log(点击任意子元素都会触发事件...);})

button

srcElement属性表示真正触发事件的元素它是一个元素类型的节点。

script//

document.querySelectorAll(table

button)//

document.querySelector(table)parents.addEventListener(click,

function

元素才会真正去执行逻辑if(ev.target.tagName

BUTTON)

加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件

事件名load

window.addEventListener(scroll,

function()

window.addEventListener(resize,

function()

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

注意: