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. python,PyAutoGUI,设置鼠标键盘自动操作

    三个文件需在同一个文件夹下面,文件夹的位置无要求. 1.第一个文件,trial.py.python代码调用PyAutoGUI操作鼠标键盘,可以通过修改start_time和end_time来确定程序自 ...

  2. Java多线程处理任务(摘抄)

    很多时候,我们需要对一个庞大的队列或者二维数组进行处理.这些处理可能是循环的,比如给一个excel多个sheet的联系人列表发邮件.很幼稚的方法就是用一个或者两个FOR循环搞定,对于庞大的数据有得让你 ...

  3. Android recycleview item水波纹效果

    item的xml 根标签下添加如下三个属性 android:clickable="true" android:focusable="true" android: ...

  4. vue实现动态绑定class--(boolean)绑定class,点击有,再点击取消

    <template> <div :class="{'flag':selected}" @click=clickBtn>xxx</div>< ...

  5. python之time模块和hashlib模块

    一.time模块 import time print(time.strftime('%Y-%m-%d %H:%M:%S'))#获取当前的格式化时间,time.strftime(format) prin ...

  6. JavaScript--DOM,BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  7. SSH免密码登陆详解

    为了更好的理解SSH免密码登陆原理,我们先来说说SSH的安全验证,SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统,其安全验证又分为两种级别. 1. 基于口令的安全验证 这种方式使用用户 ...

  8. Offer垂青于有准备的人——微软亚洲研究院实习生们的就业分享

    编者按:一年一度的"求职大战"又拉开了序幕,如何在求职中掌握主动,更好地展现自己,最后抓住Offer?且听微软亚洲研究院三位实习生慢慢道来,Offer总会垂青于有准备的人. 廖振, ...

  9. [蓝桥杯2015初赛]方程整数解 unordered_map

    unordered_map: 如果直接写报错加上tr1: #include<tr1/unordered_map>//注意写法 using namespace std; using name ...

  10. cs231n spring 2017 lecture15 Efficient Methods and Hardware for Deep Learning

    讲课嘉宾是Song Han,个人主页 Stanford:https://stanford.edu/~songhan/:MIT:https://mtlsites.mit.edu/songhan/. 1. ...