DOM3中的自定义事件
DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent()方法接收如下四个参数。
- type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
- bubble(布尔值):标示事件是否应该冒泡;
- cancelable(布尔值):标示事件是否可以取消;
- 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中的自定义事件的更多相关文章
- 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 ...
- JS 中的自定义事件和模拟事件
在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...
- DragonBones龙骨骨骼中的自定义事件(另有声音、动画事件)
参考: DragonBones骨骼动画事件系统详解 一.在DragonBones中添加自定义事件帧 动画制作时 时间轴拉到最下面有一个事件层,添加一个事件帧 左边属性面板定义自定义事件 二.Egret ...
- Spring中实现自定义事件
原理: 通过扩展ApplicationEvent,创建一个事件类CustomEvent.这个类必须定义一个默认的构造函数,它应该从ApplicationEvent类中继承的构造函数. 一旦定义事件类, ...
- vue--组件中的自定义事件
父组件通过props向子组件传递数据,子组件通过自定义事件向父组件传递信息. 在子组件中通过$emit触发事件,父组件在直接使用子组件的地方使用v-on(即@)来监听子组件触发的事件. 举例:(不知道 ...
- 【转】Flash AS3.0 中的自定义事件
原文 http://www.cnblogs.com/acpp/archive/2010/10/19/1855670.html package { import flash.events.Event; ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- JavaScript使用自定义事件实现简单的模块化开发
WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...
随机推荐
- Nginx配置使用
1.黑色标注的得自己写入到nginx.conf文件中 upstream serverlb { server 127.0.0.1:9999; server 127.0.0.1:8888; } serve ...
- VSTO外接程序项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【C#版】
VSTO中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在ThisAddin.cs这个默认文件中. 大家可以在Visual Studio中创建 ...
- springboot actuator监控笔记
0 环境 系统:win10 编辑器:IDEA 1 概念 监控 管理自身信息(可以自定义) 的模块 2 文件配置 1 pom的配置 监控的添加 <dependency> <groupI ...
- F5 BIG-IPLTM串联组网连接模式
- spring注入原型bean
<bean id="httpClient" class="org.apache.commons.httpclient.HttpClient" scope= ...
- 之前工作过程中自定义的代码生成器模版,codesimit
动软代码生成器 和codesmith 5年前的东西,或许有些过时 动软的功能有限,改的也比较简单,已弃. codesmith可定制性强,当时自已改的,提高了团队的整体工作效率. codesmith代码 ...
- 公式化学习requests(第二卷)
请求浏览器分为两种一种是不需要用户登录验证直接请求 另一种是需要用户登陆验证请求,现在说一下利用COOKIE实现,COOKIE在前端开发时有很多的作用,要熟练使用, 直接上代码了: 第一步:访问页面, ...
- 2015-09-14-C++基础
声明与定义 声音与定义的区别在于,声明没有给变量分配空间,而定义则给变量分配了空间:定义也是声明. extern int i; // 声明但未定义 int i ; //声明且定义 extern dou ...
- Nginx笔记总结六:Nginx location配置
语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...
- 树的DFS
Depth-first search (DFS) is an algorithm for traversing or searching tree or graph data structures. ...