通过Event和dispathEvents触发自定义事件

  1. <span id="btn">获取</span>
  2. <script>
  3. var event = new Event("build");
  4. var ele = document.getElementById("btn");
  5.  
  6. ele.addEventListener("build", function(){
  7. alert("build")
  8. }, false)
  9.  
  10. ele.dispatchEvent(event)
  11. </script>

还可以通过CustomEvent 高度自定义事件,传输参数。

  1. <span id="btn">获取</span>
  2. <script>
  3. var event = new CustomEvent("build", {
  4. detail: {
  5. data: new Date().getDate()
  6. },
  7. bubbles: true, //是否冒泡
  8. cancelable: false //是否取消默认事件
  9. });
  10.  
  11. var ele = document.getElementById("btn");
  12.  
  13. ele.addEventListener("build", function(e){
  14. console.log("今天是" + e.detail.data + "日")
  15. }, false)
  16.  
  17. ele.dispatchEvent(event); // 触发事件
  18. </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. 如何快速查找到HTML头尾对应标签?

    在使用Atom编辑器整理HTML代码的时候,希望快速找到HTML头尾对应的标签.  ctrl+m 试试看 

  2. leetcode探索高级算法

    C++版 数组和字符串 正文 链表: 正文 树与图: 树: leetcode236. 二叉树的最近公共祖先 递归(先序) leetcode124二叉树最大路径和 递归 图: leetcode 547朋 ...

  3. react封装基于axios的API请求

    一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const Method ...

  4. 启动eclipse导致Tomcat的配置文件重置

    转: 启动eclipse导致Tomcat的配置文件重置 导入一个项目,需要在Tomcat的配置文件中配置JNDI数据源,需要修改Tomcat下的server.xml文件.但是当我们修改完后重启Tomc ...

  5. 每个开发者都应该知道的SOLID原则

    每个开发者都应该知道的SOLID原则 单一职责原则(SRP) 它为什么违反了 SRP? 这种设计将来会带来什么问题? 开闭原则(OCP) 如何使它(AnimalSound)符合 OCP? 里氏替换原则 ...

  6. spring mvc 最详细文档,前无古人后无来者 掉渣天~

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  7. 说说mysql的存储引擎,有什么区别?索引的介绍

    InnoDB 支持ACID事务,支持事务的四种隔离级别,串行化,可重复读,读已提交,读未提交. 支持行级锁以及外检约束:所以可以支持写并发. 不存储总行数. 逐渐索引采用聚集索引,索引的数据域存储数据 ...

  8. 安装horizon

    在控制节点上安装 controllerHost='controller' ADMIN_PASSWD='Ideal123!' 1.安装dashboard组件 yum -y install opensta ...

  9. Lua字符串及模式匹配

    字符类基础函数举例介绍: string.len( ‘string’ ) string.lower( ‘string’ ) string.upper( ‘string’ ) string.rep( ‘a ...

  10. 第六周&java实验报告四

    实验报告: 一.实验目的 (1)掌握类的继承 (2)变量的继承和覆盖,方法的继承,重载和覆盖的实现: 二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:rad ...