自定义事件 Event 、CustomEvent的使用
通过Event和dispathEvents触发自定义事件
<span id="btn">获取</span>
<script>
var event = new Event("build");
var ele = document.getElementById("btn"); ele.addEventListener("build", function(){
alert("build")
}, false) ele.dispatchEvent(event)
</script>
还可以通过CustomEvent 高度自定义事件,传输参数。
<span id="btn">获取</span>
<script>
var event = new CustomEvent("build", {
detail: {
data: new Date().getDate()
},
bubbles: true, //是否冒泡
cancelable: false //是否取消默认事件
}); var ele = document.getElementById("btn"); ele.addEventListener("build", function(e){
console.log("今天是" + e.detail.data + "日")
}, false) ele.dispatchEvent(event); // 触发事件
</script>
自定义事件 Event 、CustomEvent的使用的更多相关文章
- 自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- 转 js自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 如何订阅Form的自定义事件
Window Form类有很多的属性/方法和事件,其中事件属于一种发布订阅模式 .订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主体对象.这个主体对象在自身状态变化时,会通知所 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- 谈谈JS的观察者模式(自定义事件)
呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...
- js:实现自定义事件对象接口
网易2017内推笔试题 要求: 请实现下面的自定义事件Event对象的接口,功能见注释(测试1) 该Event对象的接口需要能被其他对象拓展复用(测试2) //测试1 Event.on('test', ...
- Qt 自定义事件(三种方法:继承QEvent,然后Send Post就都可以了,也可以覆盖customEvent函数,也可覆盖event()函数)
Qt 自定义事件很简单,同其它类库的使用很相似,都是要继承一个类进行扩展.在 Qt 中,你需要继承的类是 QEvent. 继承QEvent类,你需要提供一个QEvent::Type类型的参数,作为自定 ...
- js自定义事件CustomEvent、Event、TargetEvent
1.Event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event的事件都是系统自 ...
随机推荐
- kotlin之类构造器
Kotlin中类允许定义个主构造器和多个第二构造器. 主构造器就是类头的一部分,紧跟在类名的后面,构造器参数是可选的 package loaderman import loaderman.bar.Pe ...
- php连接数据库的两种方式- 面向过程 面向对象
php连接数据库的两种方式- 面向过程 面向对象 一.面向对象1. 链接数据库$conn = @new mysqli("127.0.0.1","root", ...
- [ML] LIBSVM Data: Classification, Regression, and Multi-label
数据库下载:LIBSVM Data: Classification, Regression, and Multi-label 一.机器学习模型的参数 模型所需的参数格式,有些为:LabeledPoin ...
- Samrty技术的 初步了解
<span style="font-size:18px;">Smarty 技术的使用 <?php #smarty 测试 #引入smarty require_onc ...
- MATLAB学习(六)绘图图形功能
>> x=0:.1:2*pi;plot(x,sin(x),x,cos(x)) >> plot(x,sin(x),'p ...
- Linux日常用的命令
查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...
- Kafka管理与监控——查看和重设消费者组位移
kafka 0.11.0.0版本丰富了kafka-consumer-groups脚本的功能,用户可以直接使用该脚本很方便地为已有的consumer group重新设置位移. 前提必须consumer ...
- Java集合(3):使用Abstract类
每个java.util容器都有其自己的Abstract类,它们提供了该容器接口的部分实现.下面是一个定制自己的Map的例子(List set就省略了): 定制自己的Map实现AbstractMap-- ...
- java数据机构之自定义栈
一.栈的特点 1.线性数据结构 2.后进先出 二.使用数组来实现栈 //使用数组来实现栈 public class MyArrayStack<E> { //保存数据 private Obj ...
- mgo连接池
package main import ( "log" "sync" "time" "gopkg.in/mgo.v2" ...