一.事件流

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

有两个阶段:捕获阶段 和 冒泡阶段 实际工作中以使用冒泡事件为主

1.事件捕获

从DOM根元素开始去执行对应的事件(从外到里)

触发方式:在DOM.addEventListener()的第三个参数传入true 这里的第三个参数默认为false 即冒泡阶段触发

2.事件冒泡

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

下面是事件捕获 在点击’son’盒子后将会先弹出’我是爷爷’ 后面再弹出其后代内容

下面是事件冒泡 在点击’son’盒子后将会先弹出’我是孙子’ 后面再弹出其父级盒子内容

红色框部分是用于阻止事件冒泡 因为我们有时候不希望事件影响父级元素

阻止事件冒泡需要先拿到事件对象(en) 再用en.stopPropagation()进行阻止 (PS:其实也可以阻止捕获阶段)

二.事件解绑

L0事件解绑 直接设为null即可

L2事件解绑 需要使用 DOM.removeEventListener(‘click’,fn)语句

匿名函数无法解绑

如图 给事件解绑后再点击按钮将不会弹出’click!’

三.鼠标经过事件的区别

1.mouseenter/mouseleave — >没有冒泡效果!!! (推荐)

2.mouseover/mouseout — >有冒泡效果!

下面通过简单例子解释冒泡效果是怎么样的

我们都给dad元素加上鼠标事件监听

当鼠标刚刚经过大盒子时 显示鼠标经过

当鼠标经过小盒子时 先显示鼠标离开 而后又显示鼠标经过

这说明在进入小盒子时 它算离开大盒子 再根据冒泡事件 又冒泡经过大盒子

四.事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

利用事件冒泡的特点 给父元素注册事件 触发子元素的时候 会冒泡到父元素身上 从而触发父元素的事件

例 我们要求点击ul中的li变色 但点击其他位置不变色

给li的父级元素ul增添事件监听 点击li后冒泡到ul上触发鼠标事件

用e接受事件对象 我们可以看到e.target就是<li>元素

又要求只有点击li才变色 又可以获取e.target.tagName 判断是否等于”LI”(大写!!!)来给target变色

这里我们会用一个tab栏切换的案例巩固这个知识点 在后面的文章会提到

五.阻止元素默认行为

这个部分在项目中很常用 比如在用户提交注册信息时 若还有内容未填满就禁止提交 也可以阻止链接的跳转

获取事件对象e后 调用e.preventDefault()函数即可阻止默认行为

六.页面加载事件

这部分没那么重要 直接粘段代码在这里了 需要的可以来查看

七.页面滚动事件

window.addEventListener(‘scroll’,function(){})

怎么获取页面滚动了多少元素?

注意这里说的是页面! 不可以用document.html获得 而要用document.documentElement获取HTML元素

用document.documentElement.scrollTop获取页面被卷去的像素大小(没单位!!!) 这是一个数字型元素 可以取值也可以赋值 还有scrollLeft,代表被卷去的左侧大小

如图实现了一个小案例 当页面滚动超过100像素显示div盒子 否则不显示div盒子

这个事件也可以用于盒元素等 不过不常用

八.页面尺寸

1.resize:浏览器窗口大小发生变化的时候触发的事件

2.clientWidth和clientHeight

获取元素宽度和高度

不包含border,padding,滚动条 只读

3.offsetWidth和offsetHeight

获取元素宽度和高度

包含border,padding,滚动条等 只读

4.offsetLeft和offsetTop

获取元素距离自己定位父级元素的左,上距离 类似于绝对定位

获取元素位置的时候使用 只读

总结如下

这些就是今天学习内容的基础知识 还需要具体案例来巩固复习 重点是事件委托,页面滚动和页面尺寸的应用

加油!!!