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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
详解React中setState回调函数
Jun 14 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 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
mysql limit查询优化分析
2008/11/12 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python对wav文件的重采样实例
2020/02/25 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
日语求职信范文
2013/12/17 职场文书
公益广告语集锦
2014/03/13 职场文书
结对共建协议书
2014/08/20 职场文书
离婚被告答辩状
2015/05/22 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
高老头读书笔记
2015/06/30 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL