当前位置:网站首页>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框架学习:模板继承
- Chapter 13 Class Inheritance-1
- 吃瓜教程task01 第2章 模型评估与选择
- tensorflow代码翻译成pytorch代码 -详细教程+案例
- 【分享】一个免费语料库
- 软件测试风险识别
- 【win10+cuda7.5+cudnn6.0安装caffe③】编译及测试caffe
- [C language advanced] The first in-depth analysis of the storage of integer data in memory (1)
- (三)性能实时监控平台搭建(Grafana+Prometheus+Node_explorer+Jmeter)
- 开炮,开炮
猜你喜欢
随机推荐
Win下安装不同版本的MinGW(g++/gcc)以及对应clion编辑器的配置
基于TF-IDF 文本相似性实战 详细教程
二、Jmeter 核心配置文件
Randomly generate uuid using rand function
Flask框架学习:模板继承
Django--20实现Redis支持、上下文以及上下文和接口的交互
函数怎么用
(3) How Redis performs stress testing
CSDN 社区内容创作规范
pytorch矩阵运算问题
Who am I ?
全国青少年信息学奥林匹克联赛大纲
[C language from elementary to advanced] Part 1 Initial C language (1)
吃瓜教程task01 第1章 绪论
博客目录管理 :机器学习 深度学习 nlp
imx6 yocto编译备忘
滴滴出行 nlp算法工程师面试经验分享 带offer截图真实
第8章 函数探幽-2
【备忘】从零开始搭建Yolo5训练环境
Blender 初教程