事件对象
获取事件对象
let btn = document. querySelector ( 'button' )
btn. addEventListener ( 'click' , function ( e ) {
console. log ( 'e' , e) ;
} )
常用属性
type 获取当前的事件类型
clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
pageX/pageY 获取光标相对于整个页面的位置
key 用户按下的键盘键的值
document. addEventListener ( 'click' , function ( e ) {
console. log ( 'clientX:' + e. clientX, 'clientY:' + e. clientY) ;
console. log ( 'pageX:' + e. pageX, 'pageY:' + e. pageY) ;
console. log ( 'offsetX:' + e. offsetX, 'offsetY:' + e. offsetY)
} )
事件流
事件流与两个阶段
事件流指的是事件完整执行过程中的流动路径
捕获阶段 从父到子
冒泡阶段 从子到父
事件捕获和事件冒泡
事件冒泡 当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡默认存在 必须时相同的点击类型(如click)
事件捕获 从DOM的根元素开始去执行对应的事件 (从外到里)
捕获语法: document.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
捕获很少使用 默认不捕获
阻止事件流动
默认有冒泡的存在,子元素的点击会影响到父元素
阻止事件流动:把事件限制再当前元素内
语法:事件对象.stopPropagation()
阻断事件流动传播(冒泡阶段,捕获阶段都有效)
鼠标经过事件 mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止链接跳转 e.preventDefault
let fa = document. querySelector ( '.father' )
let son = document. querySelector ( '.son' )
fa. addEventListener ( 'click' , function ( e ) {
e. stopPropagation ( )
console. log ( '点击了父亲' ) ;
} )
son. addEventListener ( 'click' , function ( e ) {
console. log ( '点击了儿子' ) ;
e. stopPropagation ( )
} )
传统on注册与事件监听注册的区别
< button> 点击< / button>
< script>
let btn = document. querySelector ( 'button' )
btn. addEventListener ( 'click' , add)
function add ( ) {
alert ( '第一次' )
}
btn. addEventListener ( 'click' , function ( ) {
alert ( '第二次' )
} ) ;
btn. removeEventListener ( 'click' , add)
< / script>
事件委托
利用事件流的特征解决一些开发的需求
优点: 给父级元素加事件(提高性能),省区for循环给子元素绑定事件
原理: 利用冒泡的特点
实现:事件对象.target 可以获得真正触发事件的元素
< ul>
< li> 我是第1 个小li< / li>
< li> 我是第2 个小li< / li>
< li> 我是第3 个小li< / li>
< li> 我是第4 个小li< / li>
< li> 我是第5 个小li< / li>
< / ul>
< script>
let ul = document. querySelector ( 'ul' )
ul. addEventListener ( 'click' , function ( e ) {
console. log ( '我点击了' ) ;
console. log ( '打印事件对象' , e. target) ;
e. target. style. color = 'red'
} )
< / script>