通过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的使用的更多相关文章

  1. 自定义事件——Event和CustomEvent

    之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...

  2. 转 js自定义事件——Event和CustomEvent

    之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...

  3. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  4. 如何订阅Form的自定义事件

    Window Form类有很多的属性/方法和事件,其中事件属于一种发布订阅模式 .订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主体对象.这个主体对象在自身状态变化时,会通知所 ...

  5. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  6. 谈谈JS的观察者模式(自定义事件)

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  7. js:实现自定义事件对象接口

    网易2017内推笔试题 要求: 请实现下面的自定义事件Event对象的接口,功能见注释(测试1) 该Event对象的接口需要能被其他对象拓展复用(测试2) //测试1 Event.on('test', ...

  8. Qt 自定义事件(三种方法:继承QEvent,然后Send Post就都可以了,也可以覆盖customEvent函数,也可覆盖event()函数)

    Qt 自定义事件很简单,同其它类库的使用很相似,都是要继承一个类进行扩展.在 Qt 中,你需要继承的类是 QEvent. 继承QEvent类,你需要提供一个QEvent::Type类型的参数,作为自定 ...

  9. js自定义事件CustomEvent、Event、TargetEvent

    1.Event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event的事件都是系统自 ...

随机推荐

  1. 语法错误 : 缺少“;”(在“<”的前面)

    该错误有可能是由错误所指行“<”附近的某个类型忘记#include <>所造成的

  2. Selenium 2自动化测试实战32(Fixtures)

    Fixtures fixtures可以形象地把它看作是夹心饼干外层的两片饼干,这两片饼干就是setUp/tearDown,中间的心就是测试用例.除此之外,unittest还提供了更大范围的fixtur ...

  3. Linux任务后台运行的方法

    linux在后台运行程序当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时 ...

  4. Attention机制在深度学习推荐算法中的应用(转载)

    AFM:Attentional Factorization Machines: Learning the Weight of Feature Interactions via Attention Ne ...

  5. k8s 1.15.2 部署

    目录 一.环境准备 二.软件安装 三.部署master节点 四.部署node节点 五.集群状态检测 一.环境准备 IP地址 节点角色 CPU Memory Hostname Docker versio ...

  6. 英特尔®oneAPI简介及动手实验研讨会召集令

    Intel Developer Zone 2019年超级计算大会英特尔正式发布了oneAPI软件行业计划及其beta产品,在上篇文章中我们已为您介绍了oneAPI的基本含义,本文将继续为您介绍oneA ...

  7. web赛题

    @php反序列化漏洞https://www.freebuf.com/news/172507.html @巅峰极客wp https://www.anquanke.com/post/id/189142 @ ...

  8. Java学习笔记-网络编程

    Java提供了网络编程,并且在实际中有着大量运用 网络编程 网络编程概述 网络模型 OSI参考模型 TCP/IP参考模型 网络通讯要素 IP地址 端口号 传输协议 网络参考模型 网络通讯要素 IP地址 ...

  9. 图表:WebChartControl

    #region 画统计图 /// <summary> /// 画统计图 /// </summary> private void LoadWebChartControl() { ...

  10. JAVA实验报告四及第六周总结

    JAVA第六周作业 实验报告四 第一题 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆的半径. 2.圆类Circle的方法成员: Circle():构造 ...