自定义事件 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的事件都是系统自 ...
随机推荐
- 如何快速查找到HTML头尾对应标签?
在使用Atom编辑器整理HTML代码的时候,希望快速找到HTML头尾对应的标签. ctrl+m 试试看
- leetcode探索高级算法
C++版 数组和字符串 正文 链表: 正文 树与图: 树: leetcode236. 二叉树的最近公共祖先 递归(先序) leetcode124二叉树最大路径和 递归 图: leetcode 547朋 ...
- react封装基于axios的API请求
一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const Method ...
- 启动eclipse导致Tomcat的配置文件重置
转: 启动eclipse导致Tomcat的配置文件重置 导入一个项目,需要在Tomcat的配置文件中配置JNDI数据源,需要修改Tomcat下的server.xml文件.但是当我们修改完后重启Tomc ...
- 每个开发者都应该知道的SOLID原则
每个开发者都应该知道的SOLID原则 单一职责原则(SRP) 它为什么违反了 SRP? 这种设计将来会带来什么问题? 开闭原则(OCP) 如何使它(AnimalSound)符合 OCP? 里氏替换原则 ...
- spring mvc 最详细文档,前无古人后无来者 掉渣天~
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...
- 说说mysql的存储引擎,有什么区别?索引的介绍
InnoDB 支持ACID事务,支持事务的四种隔离级别,串行化,可重复读,读已提交,读未提交. 支持行级锁以及外检约束:所以可以支持写并发. 不存储总行数. 逐渐索引采用聚集索引,索引的数据域存储数据 ...
- 安装horizon
在控制节点上安装 controllerHost='controller' ADMIN_PASSWD='Ideal123!' 1.安装dashboard组件 yum -y install opensta ...
- Lua字符串及模式匹配
字符类基础函数举例介绍: string.len( ‘string’ ) string.lower( ‘string’ ) string.upper( ‘string’ ) string.rep( ‘a ...
- 第六周&java实验报告四
实验报告: 一.实验目的 (1)掌握类的继承 (2)变量的继承和覆盖,方法的继承,重载和覆盖的实现: 二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:rad ...