当前位置:网站首页>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 表示自定义事件
边栏推荐
猜你喜欢
Flask framework to study: the debug and configuration items
C语言——动态内存分配常见的错误案例
Flask框架学习:模板继承
简单做份西红柿炒蛋778
Flask framework learning: template inheritance
更新啦~人生重开模拟器自制
【分享】一个免费语料库
吃瓜教程task02 第3章 线性模型
(1) Construction of a real-time performance monitoring platform (Grafana+Influxdb+Jmeter)
吃瓜教程task01 第2章 模型评估与选择
随机推荐
C语言——程序的编译与执行、宏定义详解
华为od德科面试数据算法解析 2022-8-10 迷宫问题
【分享】一个免费语料库
task05 PyTorch可视化
[C language advanced] The first in-depth analysis of the storage of integer data in memory (1)
flaks framework learning: adding variables to the URL
C语言——逆序输出字符串的函数实现
lspci 命令使用
【转载】如何理解数据集中【训练集】、【验证集】和【测试集】
C语言版——通讯录进阶(文件版本)
C语言之EOF、feof函数、ferror函数
性能效率测试
pytorch安装笔记——Pytorch在conda+CUDA10.2环境安装task01
LeetCode1166. Designing File Systems
QtDataVisualization 数据3D可视化
QT Mat转HObject和HObject转Mat 图像视觉处理
vftpd本地可以连接,远程连接超时的解决
CSDN 社区内容创作规范
第5章 循环和关系表达式
LeetCode1166.设计文件系统