通过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. thinkphp5的控制器调用自身模块和调用其他模块的方法

    以user为例,调用user.php的get_number()方法 一.不管是调用自身模块还是其他模块app\model\User.php写法不变 <?php namespace app\ind ...

  2. PHP格式化数字和SMARTY格式化数字的方法

    PHP格式化: $num="3";$format="%06d";  //6是位数,这里有6位数,0是不足6位的补0$a=sprintf($format,$num ...

  3. 利用beautifulsoup下载网页html代码中的css, js, img文件并保存

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...

  4. Redis 部署安装

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  5. JAVA 基础编程练习题14 【程序 14 求日期】

    14 [程序 14 求日期] 题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析:以 3 月 5 日为例,应该先把前两个月的加起来,然后再加上 5 天即本年的第几天,特殊情况, 闰年且输入 ...

  6. 在Spring中配置jdbc为什么不能用${username}问题

    楼主在spring中配置jdbc时,引用的是dbcp.jar包,在dataSource.properties配置文件中,有mysql用户名,楼主自然的选择了使用username,密码是root, 然后 ...

  7. Java并发——volatile

    CPU的内存模型如下:

  8. cnpm 安装vue与vue/cli

    cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 vue npm install -g npm 安装 ...

  9. 【ARM-Linux开发】Linux环境下使用eclipse开发C++动态链接库程序

    Linux环境下使用eclipse开发C++动态链接库程序 Linux中也有类似windows中DLL的变成方法,只不过名称不同而已.在Linux中,动态链接叫做Standard Object,生成的 ...

  10. @Transactional事务总结

    一:加了注解@Transactional就能起作用的原理总结: 1:首先是由类:JdkDynamicAopProxy,在invoke方法里面创建动态代理类,同时由拦截类进行拦截,代码如下所示: Lis ...