您现在的位置是:首页 > 正文

事件之事件对象(event)

2024-02-01 02:01:24阅读 2

DOM中的事件对象

event对象中存在是属性和方法如下表所示:

在事件处理程序内部,对象this始终等于currentTarget(事件处理程序注册在这个元素之上),而target只包含事件的实际目标(即实际作出事件处理的元素)。

使用方法:event.属性

                eg:event.preventDefault();--------取消特定时间的默认事件(写在事件处理程序内部)

提示:只有事件处理程序执行期间,event对象才会存在,一旦时间内处理程序执行完成,event对象就会销毁。

IE中的事件对象

 最主要的事件对象如下表所示

需要注意的是

IE中使用returnValue组织事件默认行为中,无法提前确定事件能否被取消,因为IE 中没有cancelable属性进行判断。

而cancelBubble属性只能取消事件冒泡,因为IE不支持事件冒泡。

跨浏览器事件对象

对前面介绍的EventUtil 对象加以增强,添加如下方法以求同存异。

var EventUtil = {
      addHandler: function (element, type, handler) {
        //省略的代码
      },
      getEvent: function (event) {
        return event ? event : window.event;
      },
      getTarget: function (event) {
        return event.target || event.srcElement;
      },
      preventDefault: function (event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },
      removeHandler: function (element, type, handler) {
        //省略的代码
      },
      stopPropagation: function (event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };

以上代码显示,我们为EventUtil 添加了4 个新方法。第一个是getEvent(),它返回对event对象的引用。考虑到IE 中事件对象的位置不同,可以使用这个方法来取得event 对象,而不必担心指定事件处理程序的方式。在使用这个方法时,必须假设有一个事件对象传入到事件处理程序中,而且要把该变量传给这个方法,如下所示。

btn.onclick = function (event) {
      event = EventUtil.getEvent(event);
    };


在兼容DOM 的浏览器中,event 变量只是简单地传入和返回。而在IE 中,event 参数是未定义的(undefined),因此就会返回window.event。将这一行代码添加到事件处理程序的开头,就可以确保随时都能使用event 对象,而不必担心用户使用的是什么浏览器。

第二个方法是getTarget(),它返回事件的目标。在这个方法内部,会检测event 对象的target属性,如果存在则返回该属性的值;否则,返回srcElement 属性的值。可以像下面这样使用这个方法。

btn.onclick = function (event) {
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
    };


第三个方法是preventDefault(),用于取消事件的默认行为。在传入event 对象后,这个方法会检查是否存在preventDefault()方法,如果存在则调用该方法。如果preventDefault()方法不存在,则将returnValue 设置为false。下面是使用这个方法的例子。

var link = document.getElementById("myLink");
    link.onclick = function (event) {
      event = EventUtil.getEvent(event);
      EventUtil.preventDefault(event);
    };


以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先,使用EventUtil.getEvent()取得event 对象,然后将其传入到EventUtil.preventDefault()以取消默认行为。第四个方法是stopPropagation(),其实现方式类似。首先尝试使用DOM 方法阻止事件流,否则就使用cancelBubble 属性。下面看一个例子。

var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
      alert("Clicked");
      event = EventUtil.getEvent(event);
      EventUtil.stopPropagation(event);
    };
    document.body.onclick = function (event) {
      alert("Body clicked");
    };


在此,首先使用EventUtil.getEvent()取得了event 对象,然后又将其传入到EventUtil.stopPropagation()。别忘了由于IE 不支持事件捕获,因此这个方法在跨浏览器的情况下,也只能用来阻止事件冒泡。
 

网站文章

  • 11-2.箭头函数与函数的this问题

    11-2.箭头函数与函数的this问题

    test()实质上是window.test() window可以被省略某一个元素使用就指向某一个元素打开页面后点击一下div在对象中也是哪个对象使用了,this就指向谁。

    2024-02-01 02:01:17
  • 如何准备大学生电子设计竞赛

    如何准备大学生电子设计竞赛

    如何备考大学生电子设计竞赛

    2024-02-01 02:00:47
  • Invalid attempt to spread non-iterable instance 错误

    Invalid attempt to spread non-iterable instance 错误

    扩展运算符错误数组要用 []对象要用 {}

    2024-02-01 02:00:41
  • 迭代器和生成器

    迭代器和生成器

    迭代器遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。ES6 创造了一种新的遍历命令 f...

    2024-02-01 02:00:34
  • eureka的多级缓存机制

    当客户端需要调用某个服务时,它会向Eureka Server发送请求,Eureka Server会从自己的缓存中查找服务实例的信息,如果缓存中没有,则会从其他Eureka Server节点或者服务实例...

    2024-02-01 02:00:28
  • SQL查询语句分步详解------HAVING命令

    SQL查询语句分步详解------HAVING命令

    2024-02-01 01:59:59
  • 在 ES 模块构建的Nodejs中如何使用 __dirname 和 __filename

    解决在使用nodejs构建`ESM`程序的时候,找不到`__filename`和`__direname`这两个变量,并且不能直接导入`JSON`文件的问题

    2024-02-01 01:59:52
  • jquery 读取本地 XML文件 代码

    可以使用 jQuery 的 AJAX 方法实现,代码如下: $.ajax({ type: "GET", url: "file.xml", dataType: "xml", success: function(xml) { // 在此处添加代码 }});

    2024-02-01 01:59:19
  • Springboot旅游社交平台9k9sq计算机毕业设计-课程设计-期末作业-毕设程序代做

    Springboot旅游社交平台9k9sq计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:idea eclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数 据 库:MySQL5.7/8.0pwd=kap3 最新计算机专业原创开发毕业设计源码+数据

    2024-02-01 01:59:12
  • 前端051_单点登录SSO_注册功能实现

    前端051_单点登录SSO_注册功能实现

    在 src/api/auth.js 添加 获取用户协议 和 提交注册 接口方法,用户协议内容已经在 public/xieyi.html 存在了,直接调用它即可。// 获取协议内容 export fun...

    2024-02-01 01:59:05