DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent()方法接收如下四个参数。

  1. type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
  2. bubble(布尔值):标示事件是否应该冒泡;
  3. cancelable(布尔值):标示事件是否可以取消;
  4. detail(对象):任意值,保存在event对象的detail属性中;

下面举例: 当点击按钮的时候,一秒钟之后会触发一个id为target的元素的自定义事件myEvent,此自定义事件发生冒泡,依次经过target,wrap和document。
实际例子在这里:https://codepen.io/zhaojianxi...

  1. <div id= wrap>
  2. <div>
  3. <div id="target"></div>
  4. </div>
  5. <button id='btn'>点击</button>
  6. </div>

  1.   var e = document.createEvent("CustomEvent");
  2.   e.initCustomEvent("myEvent",true,false,"hello world!");
  3. var btn = document.getElementById('btn');
  4. btn.addEventListener('click',function(){
  5. setTimeout(function(){
  6. target.dispatchEvent(e)
  7. },1000)
  8. })
  9. var wrap = document.getElementById('wrap');
  10. var target = document.getElementById('target');
  11. target.addEventListener('myEvent',function(e){
  12. console.log('target',e)
  13. })
  14. wrap.addEventListener('myEvent',function(e){
  15. console.log('wrap',e)
  16. })
  17. window.addEventListener('myEvent',function(e){
  18. console.log('window',e)
  19. })

DOM3中的自定义事件的更多相关文章

  1. wpf自定义控件中使用自定义事件

    wpf自定义控件中使用自定义事件 1 创建自定义控件及自定义事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  2. JS 中的自定义事件和模拟事件

    在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...

  3. DragonBones龙骨骨骼中的自定义事件(另有声音、动画事件)

    参考: DragonBones骨骼动画事件系统详解 一.在DragonBones中添加自定义事件帧 动画制作时 时间轴拉到最下面有一个事件层,添加一个事件帧 左边属性面板定义自定义事件 二.Egret ...

  4. Spring中实现自定义事件

    原理: 通过扩展ApplicationEvent,创建一个事件类CustomEvent.这个类必须定义一个默认的构造函数,它应该从ApplicationEvent类中继承的构造函数. 一旦定义事件类, ...

  5. vue--组件中的自定义事件

    父组件通过props向子组件传递数据,子组件通过自定义事件向父组件传递信息. 在子组件中通过$emit触发事件,父组件在直接使用子组件的地方使用v-on(即@)来监听子组件触发的事件. 举例:(不知道 ...

  6. 【转】Flash AS3.0 中的自定义事件

    原文 http://www.cnblogs.com/acpp/archive/2010/10/19/1855670.html package { import flash.events.Event; ...

  7. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  8. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  9. JavaScript使用自定义事件实现简单的模块化开发

    WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...

随机推荐

  1. mysql计算时间差-本例为计算分钟差然后/60计算小时保留一位小数,由于直接得小时只会取整

    -- ORDER_TIME datetime NOT NULL(字段类型)SELECTso.`ID`,so.`ORDER_TIME`,NOW(),CONCAT(ROUND(TIMESTAMPDIFF( ...

  2. bzoj 3450 Tyvj1952 Easy (概率dp)

    3450: Tyvj1952 Easy Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败 ...

  3. bug_ warning: control reaches end of non-void function

    摘要 在leetcode上编译时,它显示我编译错误 warning: control reaches end of non-void function 它的意思是:控制到达非void函数的结尾.就是说 ...

  4. nonparametric method|One-Mean t-Interval Procedure|

    8.4 Confidence Intervals for One Population Mean When σ Is Unknown 原先是 standardized version of x bar ...

  5. docker E: Unable to locate package nginx

    在使用docker容器时,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要安装vim,可是当你敲apt-get install vim命令时 ...

  6. vue-cli3初始化项目

    1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...

  7. LeetCode Day 12

    LeetCode0024 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3-> ...

  8. reduced penetrance|COPE-PCG

    生物医学大数据 Case study 由Human genome project提出之后,提出的精准医学.它的初衷是将数据standard后easy应用,我国重要重在疾病预警和疗效评价. 在疾病预警上 ...

  9. montagy

    因为只是想分享ghcjs和webgl的使用经验,所以很多地方说的很粗,因为涉及的知识确实很多, 推荐两本书,一本haskell基础的 learn you a haskell for great goo ...

  10. 吴裕雄--天生自然python学习笔记:Python3 标准库概览

    操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...