zoukankan      html  css  js  c++  java
  • JS自定义事件(Dom3级事件下)

    原文出处:  http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html 。 我拿出作者中的一段,感谢作者原创。

    DOM中的事件模拟(自定义事件):

      DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent()方法接收如下四个参数。
      1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
      2)bubble(布尔值):标示事件是否应该冒泡;
      3)cancelable(布尔值):标示事件是否可以取消;
      4)detail(对象):任意值,保存在event对象的detail属性中;

    可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:


       
      var  div = document.getElementById("myDiv");
      EventUtil.addEventHandler(div,"myEvent", function () {
        alert("div myEvent!");
      });
      EventUtil.addEventHandler(document,"myEvent",function(){
        alert("document myEvent!");
      });
      if(document.implementation.hasFeature("CustomEvents","3.0")){
        var e = document.createEvent("CustomEvent");
        e.initCustomEvent("myEvent",true,false,"hello world!");
        div.dispatchEvent(e);
      }
      这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
      IE中的事件模拟(IE8及之前版本中):
      与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
      例如:
      var btn = document.getElementById("myBtn");
      //创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
      var event  = document.createEventObject();
      //初始化事件对象
      event.screenX = 100;
      event.screenY = 0;
      event.clientX = 0;
      event.clientY =0;
      event.ctrlKey = false;
      event.altKey = false;
      event.shiftKey = false;
      event.button = 0;

      //触发事件
      btn.fireEvent("onclick",event);

  • 相关阅读:
    洛谷 P2607 [ZJOI2008]骑士(基环树、树形dp)
    洛谷 P1453 城市环路(基环树,树形dp)
    基环树学习笔记 & CF711D Directed Roads
    centos7 系统安全加固方案
    来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor
    作为一个C#程序员, 你应该上手Kotlin
    python中类和self讲解
    Mysql 存储引擎中InnoDB与Myisam的主要区别
    Apache和Nginx的区别
    PHP超全局变量
  • 原文地址:https://www.cnblogs.com/kangaoxiaoshi/p/5669282.html
Copyright © 2011-2022 走看看