通过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. kotlin之类构造器

    Kotlin中类允许定义个主构造器和多个第二构造器. 主构造器就是类头的一部分,紧跟在类名的后面,构造器参数是可选的 package loaderman import loaderman.bar.Pe ...

  2. php连接数据库的两种方式- 面向过程 面向对象

    php连接数据库的两种方式- 面向过程 面向对象   一.面向对象1. 链接数据库$conn = @new mysqli("127.0.0.1","root", ...

  3. [ML] LIBSVM Data: Classification, Regression, and Multi-label

    数据库下载:LIBSVM Data: Classification, Regression, and Multi-label 一.机器学习模型的参数 模型所需的参数格式,有些为:LabeledPoin ...

  4. Samrty技术的 初步了解

    <span style="font-size:18px;">Smarty 技术的使用 <?php #smarty 测试 #引入smarty require_onc ...

  5. MATLAB学习(六)绘图图形功能

    >> x=0:.1:2*pi;plot(x,sin(x),x,cos(x))                               >> plot(x,sin(x),'p ...

  6. Linux日常用的命令

    查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...

  7. Kafka管理与监控——查看和重设消费者组位移

    kafka 0.11.0.0版本丰富了kafka-consumer-groups脚本的功能,用户可以直接使用该脚本很方便地为已有的consumer group重新设置位移. 前提必须consumer ...

  8. Java集合(3):使用Abstract类

    每个java.util容器都有其自己的Abstract类,它们提供了该容器接口的部分实现.下面是一个定制自己的Map的例子(List set就省略了): 定制自己的Map实现AbstractMap-- ...

  9. java数据机构之自定义栈

    一.栈的特点 1.线性数据结构 2.后进先出 二.使用数组来实现栈 //使用数组来实现栈 public class MyArrayStack<E> { //保存数据 private Obj ...

  10. mgo连接池

    package main import ( "log" "sync" "time" "gopkg.in/mgo.v2" ...