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...

<div id= wrap>
<div>
<div id="target"></div>
</div>
<button id='btn'>点击</button>
</div>

  var e = document.createEvent("CustomEvent");
  e.initCustomEvent("myEvent",true,false,"hello world!"); var btn = document.getElementById('btn'); btn.addEventListener('click',function(){
setTimeout(function(){
target.dispatchEvent(e)
},1000)
}) var wrap = document.getElementById('wrap');
var target = document.getElementById('target');
target.addEventListener('myEvent',function(e){
console.log('target',e)
})
wrap.addEventListener('myEvent',function(e){
console.log('wrap',e)
})
window.addEventListener('myEvent',function(e){
console.log('window',e)
})

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. django框架进阶-CSRF认证

    ############################################### """ django中csrf的实现机制 #第一步:django第一次响应 ...

  2. [LC] 1099. Two Sum Less Than K

    Given an array A of integers and integer K, return the maximum S such that there exists i < j wit ...

  3. [LC] 139. Word Break

    Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determine ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习:JavaScript 对象 实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. json转换为go类文件,js脚本,nodejs执行

    js写的代码生成脚本,json生成对应的go type对象 作json转换用 js脚本无甚何依赖,可以直接运行 执行前,按需更改文件 示例 var topname="Data"; ...

  6. 蓝桥杯-PREV31-小朋友排队

    解法: 这题有点像冒泡排序,但是做这题并不需要冒泡排序. 假设第i个小朋友比第j个小朋友高,而且i < j 为了把队伍排成从小到大,第i个小朋友一定要去第j个小朋友的右边.又因为只能交换位置相邻 ...

  7. 第一次作业:使用java实现word count

    github项目地址: https://github.com/changrui520/homework 作业要求: 可执行程序命名为:wc.exe. 该程序处理用户需求的模式为:wc.exe [par ...

  8. Klotski's Blog

    教材: 唐朔飞 编著 "计算机组成原理(第2版)"高等教育出版社 2008年1月 习题指导教材: 唐朔飞 编著 "计算机组成原理–学习指导与习题解答(第2版)" ...

  9. [LC] 7. Reverse Integer

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  10. python3多进程爬虫(第一卷)

    进程这个东西概念很多人很模糊,而多进程并发爬虫也算是爬虫几大难点,现在我先说下进程的基本使用: 开启一个python文件 函数sayhi就是一个进程而且是主进程 现在呢我想循环输出NAME,n 正常我 ...