DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法。
那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象。我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性。
Event对象
Event对象其实是一个事件处理程序的参数,当调用事件时,我们只需要将其传入事件函数就可以获取。代码如下:
function getEvent(event) {event = event || window.event;
}
上面的事件函数传入了一个名叫Event的参数作为事件对象,同时做了浏览器兼容处理。在IE8及以前本版之中,通过设置属性注册事件处理程序时,调用的时候并未传递事件对象,需要通过全局对象window.event来获取。所以上述代码中我们利用 || 来做判断,如果event对象存在则使用event,不存在则使用window.event。
Event对象包含了几个方法和多个属性,通过这些方法和属性我们可以获取事件的详细信息并进行相关处理。
Event对象方法
Event对象主要有以下两个方法,用于处理事件的传播(冒泡、捕获)和事件的取消。
1.stopPropagation
stopPropagation方法主要用于阻止事件的进一步传播,比如阻止事件继续向上层冒泡。
function getEvent(event) {event.stopPropagation();
}child.addEventListener('click', getEvent, false);
如果你需要兼容IE8及以下版本浏览器,则需要利用cancelBubble来代替stopPropagation,因为低版本IE不支持stopPropagation方法。
function getEvent(event) {event = event || window.event;if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}
}
cancelBubble是IE事件对象的一个属性,设置这个属性为true能阻止事件进一步传播。
2.preventDefault
preventDefault方法用于取消事件的默认操作,比如a链接的跳转行为和表单自动提交行为就可以用preventDefault方法来取消。代码如下:
<a id="go" href="https://www.baidu.com/">禁止跳转</a>
var go = document.getElementById('go');function goFn(event) {event.preventDefault();console.log('我没有跳转!');
}go.addEventListener('click', goFn, false);
通过preventDefault,我们成功阻止了a链接的跳转行为。不过,在IE9之前的浏览器中需要设置returnValue属性为false来实现。如下:
function goFn(event) {event = event || window.event;if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}console.log('我没有跳转!');
}
除了以上Event对象的两个主要方法,当前DOM事件规范草案在Event对象上还定义了另一个方法,命名为stopImmediatePropagation。
3.stopImmediatePropagation
和stopPropagation相比,stopImmediatePropagation同样可以阻止事件的传播,不同点在于其还可以把这个元素绑定的同类型事件也阻止了。如:
var go = document.getElementById('go');function goFn(event) {event.preventDefault();event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同类型事件console.log('我没有跳转!');
}function goFn2(event) {console.log('我是同类型事件!');
}go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);
我们在a链接上继续加了一个点击事件,如果我们在goFn方法中添加了stopImmediatePropagation方法,那么goFn2方法将不会被执行,同时也不会将点击事件冒泡至上层。
需要注意的是,stopImmediatePropagation目前一部分浏览器尚不支持,但是像jQuery这样的库封装了跨平台的stopImmediatePropagation方法。
Event对象属性
与Event对象的方法相比,因Event对象的属性相对较多,文本无法一一讲解,所以主要介绍实际项目中常用的Event对象属性。
1.type属性
通过type我们可以获取事件发生的类型,比如点击事件我们获取的是'click'字符串。
var go = document.getElementById('go');function goFn(event) {console.log(event.type); // 输出'click'
}go.addEventListener('click', goFn, false);
2.target属性
target属性主要用于获取事件的目标对象,比如我们点击a标签获取的是a标签的html对象。
var go = document.getElementById('go');function goFn(event) {var target = event.target;console.log(target === go) // 返回true
}go.addEventListener('click', goFn, false);
在IE8及之前版本,我们需要使用srcElement而非target。兼容方案如下:
function goFn(event) {var event = event || window.event, target = event.target || event.srcElement;console.log(target === go) // 返回true
}
3. 鼠标事件属性
在用鼠标触发事件时,主要的事件属性包含鼠标的位置和按键的状态,比如:clientX和clientY指定了鼠标在窗口坐标中的位置,button和which指定了按下的鼠标键是哪个。
function moveFn(event) {console.log(event.screenX) // 获取鼠标基于屏幕的X轴坐标console.log(event.screenY) // 获取鼠标基于屏幕的Y轴坐标console.log(event.clientX) // 获取鼠标基于浏览器窗口的X轴坐标console.log(event.clientY) // 获取鼠标基于浏览器窗口的Y轴坐标console.log(event.pageX) // 获取鼠标基于文档的X轴坐标console.log(event.pageY) // 获取鼠标基于文档的Y轴坐标
}function clickFn(event) {console.log(event.button) // 获取鼠标按下的键。非IE浏览器中0为鼠标左键,1为鼠标中键,2为鼠标右键console.log(event.which) // 获取指定事件上哪个键盘键或鼠标按钮被按下
}document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);
4.键盘事件属性
在用键盘触发事件时,主要的事件属性包含键盘的按键keyCode和是否按下特殊键,比如:keyCode指定了按下键的键码值,ctrlKey指定是否按下了ctrl键。
function keyFn(event) {console.log(event.keyCode); // 获取按下键的键码值console.log(event.ctrlKey); // 获取是否按下了ctrl键console.log(event.shiftKey); // 获取是否按下了shift键console.log(event.altKey); // 获取是否按下了alt键console.log(event.metaKey); // 获取是否按下了meta键
}document.addEventListener('keyup', keyFn, false);
类似的事件属性还有表单事件属性和window事件属性等,这里不再做详细介绍。有兴趣的同学可以查阅相关资料。
总结
本文主要讲解了DOM事件中Event对象的常用属性和方法,同时也介绍了其在IE中的兼容性问题及解决方案。然而关于DOM事件的知识点远不止这些,希望仅此能够帮助初识DOM的开发者。
备注:文本参考自《Javascript权威指南》一书及慕课网教程《DOM事件揭秘》。
本文为劳卜原创文章,首发于微信公众号:前端呼啦圈(Love-FED)
转载请注明来自——微信公众号:前端呼啦圈(Love-FED)
DOM 事件深入浅出(二)相关推荐
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- 深入理解DOM事件机制
前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一.DOM事件级别 针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级 ...
- vue从入门到进阶:指令与事件(二)
一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- 彻底理解H5的DOM事件
我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互 ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- DOM事件与jQuery事件的是非纠葛
在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
最新文章
- python实现socket编程,客户端和服务端之间互相对话(二)
- mysqldump备份数据库
- DUILib 中的通知事件
- 《Effective C++》item25:考虑写出一个不抛异常的swap函数
- Python 动态载入模块
- 您应该保持联系的十大高级Java对话
- 我的博客开张了!!!
- 论文阅读 - Beat Tracking by Dynamic Programming
- 浅谈网站流量构成比例
- 【Shell】特殊变量
- mysql dump hbase_导入mysqldump表结构
- [爬虫系列(三)]用多线程爬取百度贴吧默认表情
- 网站优化:测试网站速度的8款免费工具推荐
- 记录自定义维护视图的修改日志
- 解决MySQL 8.x以上版本安装中出现staring the server错误
- 你不知道的margin:auto居中原理
- 区块链知识汇总练习——私有链、公有链、联盟链、元宇宙、AR技术
- js实现排行榜(根据我微信小程序项目所分享)完整版
- 在python中可以用什么关键字来声明一个类_python里的raise是什么意思
- 极客时间-左耳听风-程序员攻略-系统知识