一起深入理解js中的事件对象


Posted in Javascript onFebruary 06, 2021

我们知道在JS中常用的事件有:

  • 页面事件:load;
  • 焦点事件:focus,blur;
  • 鼠标事件:click,mouseout,mouseover,mousemove等;
  • 键盘事件:keydown,keyup,keypress;
  • form表单事件:reset,submit;
  • 内容变化事件:change,input

那JS中“事件对象”,到底是个什么东西?

首先,什么是事件呢?

首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触发这个事件,然后浏览器会感知(或者说捕获)到用户的这个行为,就会去响应处理这个事件。这个就称之为事件。

那么说,产生事件对象的原因是什么?

事件的触发,大部分情况下是用户想去操作的一种行为,也就是说,我们并不能确定用户什么时间触发;而且,由于事件的传播机制,我们甚至不能确定事件具体触发在哪个节点;这是一件令人很头疼的事情;

为了解决这个问题,在事件发生以后,系统会调用我们写好的事件处理程序(一段代码)来解决。

由此,引出了什么是事件对象?

系统会在调用处理程序时,把有关事件发生的一切信息,封装成一个对象,作为参数,传送给监听函数(事件处理程序)。那么说这个对象,称之为事件对象。

根据事件类型的不同,事件对象中包含的信息也有所不同;如点击事件中,包含鼠标点击的横纵坐标位置,键盘事件中,包含键盘的键值等;

<body>
 <div id="div">
 <p>pppp</p>
 </div>
 <input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//鼠标事件
d.addEventListener('click',function(e){
 console.log(e);
});
var i = document.getElementById('i');
//键盘事件
i.addEventListener('keydown',k);
function k(e){
 console.log(e);
}
</script>

一起深入理解js中的事件对象

现在了解了事件对象的含义后,我们来看看事件对象中都有哪些属性和方法?

(1) 普通属性:

event.bubbles: 返回一个布尔值,表示当前事件是否会冒泡;

event.eventPhase:返回一个整数值,表示事件流在传播阶段的位置

0:事件目前没有发生。
1:事件目前处于捕获阶段。
2:事件到达目标节点。
3:事件处于冒泡阶段。

event.type: 返回一个字符串,表示事件类型,大小写敏感;

event.timeStamp: 返回一个毫秒时间戳,表示事件发生的时间;

clientX、clientY : 获取鼠标事件触发的X,Y坐标

事件对象

(2) 事件代理/委托属性:

event.target:对事件触发的引用,返回触发事件发生的那个节点。(重点)

event.currentTarget:返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点。(了解即可)

var d = document.getElementById('d');
 d.onclick = function(e){
 //返回事件节点
 console.log(e.currentTarget);
 //返回触发节点
 console.log(e.target);
 }

事件代理(事件委托)的含义:由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这个方法叫做事件的代理也叫事件代理或者事件委托。

<head>
 <title></title>
 <meta charset="UTF-8">
 <style>
 div{padding: 40px}
 #div3{width: 300px;height: 300px;border: 1px solid red;}
 #div2{width: 200px;height: 200px;border: 1px solid red;}
 #div1{width: 100px;height: 100px;border: 1px solid red}
 </style>
</head>
<body>
 <div id="div3">div3
 <div id="div2">div2
  <div id="div1">div1</div>
 </div>
 </div>
</body>
<script>
 var d = document.getElementById('div3');
 d.onclick = function(e){
 e.target.style.background = 'red';
 }
</script>

根据上面的代码可以得到三个div的位置大概如下:点击每个div,每个div的整体就会变成红色。主要是通过e.target返回了点击触发的该节点。

一起深入理解js中的事件对象

(3)阻止浏览器默认行为和阻止事件传播的方法event.preventDefault():该方法 阻止浏览器会执行当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面;或者按一下空格键,页面向下滚动一段距离。event.stopPropagation():该方法 阻止事件在DOM结构中继续传播,防止再触发定义在别的节点上的监听函数。

<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月闻越想闻</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件传播
 e.stopPropagation();
 alert('a');
 //阻止浏览器默认行为
 e.preventDefault();
 }
</script>

使用事件对象,实现一个简单的小案例:跟着鼠标飞的div(通过修改事件对象的XY值)

<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月闻越想闻</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件传播
 e.stopPropagation();
 alert('a');
 //阻止浏览器默认行为
 e.preventDefault();
 }
</script>

一起深入理解js中的事件对象

点击前(不动)

一起深入理解js中的事件对象

点击后(跟着鼠标走)

总结

到此这篇关于js中事件对象的文章就介绍到这了,更多相关js事件对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JQuery中clone方法复制节点
May 18 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
javascript中layim之查找好友查找群组
Feb 06 #Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 #Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
You might like
WordPress中is_singular()函数简介
2015/02/05 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python数据类型强制转换实例详解
2020/06/22 Python
python如何实现word批量转HTML
2020/09/30 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
综治宣传月活动总结
2014/04/28 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
干部外出学习心得体会
2016/01/18 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
青岛市的收音机研制与生产
2022/04/07 无线电