事件进阶
一.事件流
事件流指的是事件完整执行过程中的流动路径
当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段
事件捕获:
元素.addEventListener(‘click’, 回调函数, 是否使用捕获)
addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发,默认就是 false
事件冒泡:
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。
事件冒泡是默认存在的,或者第三个参数传入 false 都是冒泡
阻止冒泡
问题:因为默认就有冒泡阶段的存在,所以容易导致事件影响到父级元素(祖先元素)
需求:若想把事件就限制在当前元素内,就需要阻止事件冒泡
鼠标经过事件的区别:
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
二.事件委托
事件委托(Event Delegation):是JavaScript中注册事件的常用技巧,也称为事件委派、事件代理
**优点:**减少注册次数,可以提高程序性能
**原理:**事件委托是利用了事件冒泡的特点
三.阻止默认行为
阻止元素发生默认的行为
例如: 当点击提交按钮时阻止对表单的提交 ; 阻止链接的跳转等等
语法: 对象.preventDefault()
四.移除事件监听
移除事件处理函数,也称为解绑事件
移除L2事件监听:
addEventListener方式注册,必须使用: removeEventListener(事件类型, 事件处理函
数, [捕获或者冒泡阶段])
移除L0事件监听:
on事件方式,直接使用null覆盖就可以实 现事件的解绑
指的是函数内部特殊的 this , 它指向一个对象,并且受当前环境影响
**作用:**弄清楚this的指向,可以让我们代码更简洁
函数的调用方式不同,this 指代的对象也不同
【谁调用, this 就是谁】 是判断 this 指向的粗略规则
直接调用函数,其实相当于是 window.函数,所以 this 指代 window
五.其他事件
1.页面加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
事件名:load
监听页面所有资源加载完毕: 给 window 添加 load 事件
事件名:DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后就触发,而无需等待样式表、图像等完全加载
监听页面DOM加载完毕: 给 document 添加 DOMContentLoaded 事件
2.页面滚动事件
事件名:scroll
scrollLeft和scrollTop (属性) 获取被卷去的左侧和头部; 这两个值是可读写的
3 .页面尺寸事件
事件名: resize
clientWidth和clientHeight : 获取元素的可见部分宽高(不包含border,margin,滚动条等)
4.元素尺寸与位置
offsetWidth 和 offsetHeight
获取元素的自身宽高、包含元素自身设置的 宽高、padding、border
返回的是数字不带单位,并且是只读属性
offsetLeft 和 offsetTop
获取元素距离自己定位父级元素的左、上边距,跟绝对定位类似 如果父级都没有定位则以浏览器文档为准
返回的是数字不带单位,并且是只读属性
dding、border
返回的是数字不带单位,并且是只读属性
offsetLeft 和 offsetTop
获取元素距离自己定位父级元素的左、上边距,跟绝对定位类似 如果父级都没有定位则以浏览器文档为准
返回的是数字不带单位,并且是只读属性