当前位置:网站首页>07-JS事件:事件类型、事件对象、事件传播、事件委托

07-JS事件:事件类型、事件对象、事件传播、事件委托

2022-08-11 05:17:00 CapejasmineY

一、事件类型

在这里插入图片描述
语法:
事件源.on事件类型=事件处理函数

二、事件对象

在页面上每一次点击就是一个事件,事件对象会记录点击时间、位置等的信息。
在这里插入图片描述

通过在事件函数中接受形参就能拿到事件对象
e.offsetX

三、事件对象内的常用信息

(1)鼠标事件

常见的三套坐标信息:
offsetX和offsetY
在这里插入图片描述
clientX和clientY
在这里插入图片描述
在这里插入图片描述
直接通过 事件对象.pageX 来拿到坐标信息

(2)键盘常用事件信息

键盘编码,确定你按下的是哪个按键
在这里插入图片描述

var input = document.querySelector('input')

input.οnkeydοwn=function(e){
     console.log(e.keycode)
}

四、事件传播

在这里插入图片描述
浏览器响应事件的机制:
在这里插入图片描述

默认在冒泡阶段触发事件,如果同时给inner、center、outer绑定点击事件,那么都会触发

阻止事件传播

事件对象.stopPropagation()

在inner上设置该属性后,点击不会触发父点击事件了

五、事件委托

将子盒子的点击事件委托给父元素,要不然每个子元素都设置太麻烦了,而且动态添加时不利于维护

使用:

ul.onclick = function(e){
    if(e.target.tagName === 'LI'){
            
    }
}

#通过父盒子点击事件的事件对象中的target属性能获取到当前点击元素。

tagName能获取到点击元素的大写标签名
e.target.dataset.name 表示自定义事件

原网站

版权声明
本文为[CapejasmineY]所创,转载请带上原文链接,感谢
https://blog.csdn.net/CapejasmineY/article/details/126231151