DOM 事件的深入浅出(二)


Posted in Javascript onDecember 05, 2016

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事件揭秘》。

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的朋友可以看下《DOM事件的深入浅出(一)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
jquery实现全屏滚动
Dec 28 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
php结合js实现多条件组合查询
May 28 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
vue.js指令v-model实现方法
Dec 05 #Javascript
DOM 事件的深入浅出(一)
Dec 05 #Javascript
使用微信小程序开发前端【快速入门】
Dec 05 #Javascript
学习vue.js表单控件绑定操作
Dec 05 #Javascript
JavaScript易错知识点整理
Dec 05 #Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
SVG实现时钟效果
2018/07/17 Javascript
使用JavaScript破解web
2018/09/28 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JS实现分页导航效果
2020/02/19 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
物理专业大学生职业生涯规划书
2014/02/07 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
MySQL分区路径子分区再分区
2022/04/13 MySQL
Java 多线程并发FutureTask
2022/06/28 Java/Android
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS