当前位置:网站首页>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 表示自定义事件
边栏推荐
猜你喜欢
随机推荐
吃瓜教程task01 第1章 绪论
Qt 字符串截取 查找字符串
Minecraft
task04 Pytorch进阶训练技巧
C语言——逆序输出字符串的函数实现
LeetCode1166.设计文件系统
滴滴出行 nlp算法工程师面试经验分享 带offer截图真实
Flask框架学习:模板继承
leetcode21. Merge two ordered linked lists
C语言版——通讯录进阶(文件版本)
pytorch中tensor 生成的函数
怎么用管理员方式打开压缩包
程序员小白的自我救赎之路。
全国青少年信息学奥林匹克联赛大纲
吃瓜教程task03 第4章 决策树
做款好喝的茶饮~
【分享】一个免费语料库
lspci 命令使用
利用rand函数随机生成uuid
吃瓜教程task02 第3章 线性模型