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);

  • 相关阅读:
    Linux基础知识第九讲,linux中的解压缩,以及软件安装命令
    Linux基础知识第八讲,系统相关操作命令
    Linux基础知识第七讲,用户权限以及用户操作命令
    Linux基础知识第六讲,远程管理ssh操作
    【Android】21.4 图片动画缩放示例
    【Android】21.3 动画
    【Android】21.2 2D图形图像处理(Canvas和Paint)
    【Android】21.1 画板资源
    【Android】第21章 2D图形和动画
    【Android】Java堆栈溢出的解决办法
  • 原文地址:https://www.cnblogs.com/kangaoxiaoshi/p/5669282.html
Copyright © 2011-2022 走看看