资讯专栏INFORMATION COLUMN

DOM 事件深入浅出(二)

ghnor / 1042人阅读

摘要:在事件深入浅出一中,我主要给大家讲解了不同级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法。方法主要用于阻止事件的进一步传播,比如阻止事件继续向上层冒泡。备注文本参考自权威指南一书及慕课网教程事件揭秘。

在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法。

那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象。我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性。

Event对象

Event对象其实是一个事件处理程序的参数,当调用事件时,我们只需要将其传入事件函数就可以获取。代码如下:

</>复制代码

  1. function getEvent(event) {
  2. event = event || window.event;
  3. }

上面的事件函数传入了一个名叫Event的参数作为事件对象,同时做了浏览器兼容处理。在IE8及以前本版之中,通过设置属性注册事件处理程序时,调用的时候并未传递事件对象,需要通过全局对象window.event来获取。所以上述代码中我们利用 || 来做判断,如果event对象存在则使用event,不存在则使用window.event。

Event对象包含了几个方法和多个属性,通过这些方法和属性我们可以获取事件的详细信息并进行相关处理。

Event对象方法

Event对象主要有以下两个方法,用于处理事件的传播(冒泡、捕获)和事件的取消。

1.stopPropagation

stopPropagation方法主要用于阻止事件的进一步传播,比如阻止事件继续向上层冒泡。

</>复制代码

  1. function getEvent(event) {
  2. event.stopPropagation();
  3. }
  4. child.addEventListener("click", getEvent, false);

如果你需要兼容IE8及以下版本浏览器,则需要利用cancelBubble来代替stopPropagation,因为低版本IE不支持stopPropagation方法。

</>复制代码

  1. function getEvent(event) {
  2. event = event || window.event;
  3. if (event.stopPropagation) {
  4. event.stopPropagation();
  5. } else {
  6. event.cancelBubble = true;
  7. }
  8. }

cancelBubble是IE事件对象的一个属性,设置这个属性为true能阻止事件进一步传播。

2.preventDefault

preventDefault方法用于取消事件的默认操作,比如a链接的跳转行为和表单自动提交行为就可以用preventDefault方法来取消。代码如下:

</>复制代码

  1. 禁止跳转

</>复制代码

  1. var go = document.getElementById("go");
  2. function goFn(event) {
  3. event.preventDefault();
  4. console.log("我没有跳转!");
  5. }
  6. go.addEventListener("click", goFn, false);

通过preventDefault,我们成功阻止了a链接的跳转行为。不过,在IE9之前的浏览器中需要设置returnValue属性为false来实现。如下:

</>复制代码

  1. function goFn(event) {
  2. event = event || window.event;
  3. if (event.preventDefault) {
  4. event.preventDefault();
  5. } else {
  6. event.returnValue = false;
  7. }
  8. console.log("我没有跳转!");
  9. }

除了以上Event对象的两个主要方法,当前DOM事件规范草案在Event对象上还定义了另一个方法,命名为stopImmediatePropagation。

3.stopImmediatePropagation

和stopPropagation相比,stopImmediatePropagation同样可以阻止事件的传播,不同点在于其还可以把这个元素绑定的同类型事件也阻止了。如:

</>复制代码

  1. var go = document.getElementById("go");
  2. function goFn(event) {
  3. event.preventDefault();
  4. event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同类型事件
  5. console.log("我没有跳转!");
  6. }
  7. function goFn2(event) {
  8. console.log("我是同类型事件!");
  9. }
  10. go.addEventListener("click", goFn, false);
  11. go.addEventListener("click", goFn2, false);

我们在a链接上继续加了一个点击事件,如果我们在goFn方法中添加了stopImmediatePropagation方法,那么goFn2方法将不会被执行,同时也不会将点击事件冒泡至上层。

需要注意的是,stopImmediatePropagation目前一部分浏览器尚不支持,但是像jQuery这样的库封装了跨平台的stopImmediatePropagation方法。

Event对象属性

与Event对象的方法相比,因Event对象的属性相对较多,文本无法一一讲解,所以主要介绍实际项目中常用的Event对象属性。

1.type属性

通过type我们可以获取事件发生的类型,比如点击事件我们获取的是"click"字符串。

</>复制代码

  1. var go = document.getElementById("go");
  2. function goFn(event) {
  3. console.log(event.type); // 输出"click"
  4. }
  5. go.addEventListener("click", goFn, false);
2.target属性

target属性主要用于获取事件的目标对象,比如我们点击a标签获取的是a标签的html对象。

</>复制代码

  1. var go = document.getElementById("go");
  2. function goFn(event) {
  3. var target = event.target;
  4. console.log(target === go) // 返回true
  5. }
  6. go.addEventListener("click", goFn, false);

在IE8及之前版本,我们需要使用srcElement而非target。兼容方案如下:

</>复制代码

  1. function goFn(event) {
  2. var event = event || window.event,
  3. target = event.target || event.srcElement;
  4. console.log(target === go) // 返回true
  5. }
3. 鼠标事件属性

在用鼠标触发事件时,主要的事件属性包含鼠标的位置和按键的状态,比如:clientX和clientY指定了鼠标在窗口坐标中的位置,button和which指定了按下的鼠标键是哪个。

</>复制代码

  1. function moveFn(event) {
  2. console.log(event.screenX) // 获取鼠标基于屏幕的X轴坐标
  3. console.log(event.screenY) // 获取鼠标基于屏幕的Y轴坐标
  4. console.log(event.clientX) // 获取鼠标基于浏览器窗口的X轴坐标
  5. console.log(event.clientY) // 获取鼠标基于浏览器窗口的Y轴坐标
  6. console.log(event.pageX) // 获取鼠标基于文档的X轴坐标
  7. console.log(event.pageY) // 获取鼠标基于文档的Y轴坐标
  8. }
  9. function clickFn(event) {
  10. console.log(event.button) // 获取鼠标按下的键。非IE浏览器中0为鼠标左键,1为鼠标中键,2为鼠标右键
  11. console.log(event.which) // 获取指定事件上哪个键盘键或鼠标按钮被按下
  12. }
  13. document.addEventListener("mouseover", moveFn, false);
  14. document.addEventListener("click", clickFn, false);
4.键盘事件属性

在用键盘触发事件时,主要的事件属性包含键盘的按键keyCode和是否按下特殊键,比如:keyCode指定了按下键的键码值,ctrlKey指定是否按下了ctrl键。

</>复制代码

  1. function keyFn(event) {
  2. console.log(event.keyCode); // 获取按下键的键码值
  3. console.log(event.ctrlKey); // 获取是否按下了ctrl键
  4. console.log(event.shiftKey); // 获取是否按下了shift键
  5. console.log(event.altKey); // 获取是否按下了alt键
  6. console.log(event.metaKey); // 获取是否按下了meta键
  7. }
  8. document.addEventListener("keyup", keyFn, false);

类似的事件属性还有表单事件属性和window事件属性等,这里不再做详细介绍。有兴趣的同学可以查阅相关资料。

总结

本文主要讲解了DOM事件中Event对象的常用属性和方法,同时也介绍了其在IE中的兼容性问题及解决方案。然而关于DOM事件的知识点远不止这些,希望仅此能够帮助初识DOM的开发者。

备注:文本参考自《Javascript权威指南》一书及慕课网教程《DOM事件揭秘》。

本文为劳卜原创文章,首发于微信公众号:前端呼啦圈(Love-FED)
转载请注明来自——微信公众号:前端呼啦圈(Love-FED)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80666.html

相关文章

  • 深入理解js Dom事件机制()——添加事件处理程序

    摘要:深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作,诸如等都是事件的名称,那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。 深入理解js Dom事件机制(一)——事件流 事件就是当用户或者浏览器自身执行的某种动作,诸如 click、mouseover等都是事件的名称,那响应个事件的函数就称为事件处理程序(事件处理函数、事件句柄)。 事件处理程序的名字都是以on...

    ddongjian0000 评论0 收藏0
  • 深入理解js Dom事件机制()——添加事件处理程序

    摘要:深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作,诸如等都是事件的名称,那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。 深入理解js Dom事件机制(一)——事件流 事件就是当用户或者浏览器自身执行的某种动作,诸如 click、mouseover等都是事件的名称,那响应个事件的函数就称为事件处理程序(事件处理函数、事件句柄)。 事件处理程序的名字都是以on...

    qianfeng 评论0 收藏0
  • DOM 事件深入浅出(一)

    摘要:本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的,我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。 在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

    macg0406 评论0 收藏0
  • 深入react技术栈》学习笔记()初入React世界

    摘要:用于规范的类型与必需的状态。表示由组件更改的数据,通常是通过与用户的交互来更改的。为了实现的修改,需要注册事件处理程序到相应的元素上。当事件发生时,将更新后的值是从中检索,并通知组件。通常情况下,该函数初始化状态使用,,或其他数据存储。 前言 上一篇文章中,我们讲到了JSX的一些用法和注意事项,这次我们来讲react中最基础也是特别重要的内容:组件。这篇文章包含组件的以下内容:状态、属...

    MRZYD 评论0 收藏0
  • 深入react技术栈》学习笔记(三)漫谈React

    摘要:前言接下来让我们进入新的章节漫谈。正文一事件系统的事件系统事件系统符合标准,不存在任何兼容性问题,并且与原生的浏览器事件一样有同样的接口。所有的事件都自动绑定到最外层。组织事件冒泡的行为只适用于合成系统中,且没办法阻止原生事件冒泡。 前言 接下来让我们进入新的章节:漫谈React。本篇文章主要讲React事件系统和表单操作。 正文 一:事件系统 1.react的事件系统react事件系...

    isLishude 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<