javascript与HTML之间的交互是通过事件来实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的,其实通过javascript我们可以在任何时刻触发特定的事件,并且这些事件与浏览器创建的事件是相同的。

  通过createEvent方法,我们可以创建新的Event对象,这个方法接受一个参数eventType,即想获取的Event对象的事件模板名,其值可以为HTMLEvents、MouseEvents、UIEvents以及CustomEvent(自定义事件)。这里我们将以CustomEvent为例子进行讲解。

(1)首先创建自定义事件对象

  var event = document.createEvent("CustomEvent");

(2)然后初始化事件对象

  event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

  其中,第一个参数为要处理的事件名

  第二个参数为表明事件是否冒泡

  第三个参数为表明是否可以取消事件的默认行为

  第四个参数为细节参数

  例如:event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test,事件冒泡,可以取消事件的默认行为,细节参数为一个对象{a:"test", b:"success"}

  或者:

var event = new CustomEvent('test', {
bubbles: true,
cancelable: true,
detail: 'xxx',
});

(3)最后触发事件对象

  document.dispatchEvent(event);

(4)当然我们需要定义监控test事件的处理程序

  document.addEventListener("test", function(e){

    var obj = e.detail;

    alert(obj.a + "  " + obj.b);

  });

  最后会弹出框显示"test success"

CustomEvent自定义事件的更多相关文章

  1. 自定义事件javascript

    自定义事件 1.event构造函数自定义事件 /* * 自定义一个名为build的事件 * bubbles :事件是否冒泡 * cancelable:是否阻止事件的默认操作 * composed:指示 ...

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

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

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

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

  4. 自定义事件 Event 、CustomEvent的使用

    通过Event和dispathEvents触发自定义事件 <span id="btn">获取</span> <script> var event ...

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

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

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

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

  7. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

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

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

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

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

随机推荐

  1. supervisord安装使用简记

    What is supervisor Supervisor is a client/server system that allows its users to monitor and control ...

  2. WIN10 CMD 启动虚拟WIFI

    1.以管理员身份运行命令提示符: 快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡: 运行命令:netsh wlan set hostednetwork mode=allow ssi ...

  3. php常用字符串函数小结

    php内置了98个字符串函数(除了基于正则表达式的函数,正则表达式在此不在讨论范围),能够处理字符串中能遇到的每一个方面内容,本文对常用字符串函数进行简单的小结,主要包含以下8部分:1.确定字符串长度 ...

  4. springmvc @PathVariable("b") double b 丢失精度问题

    Spring MVC从3.0开始支持REST,而主要就是通过@PathVariable来处理请求参数和路径的映射.由于考虑到SEO的缘故,很多人喜欢把新闻的名称作为路径中的一部分去处理,这时候中文的名 ...

  5. QQ空间HD(5)-添加左侧菜单栏内容

    DJIconView.m #import "DJIconView.h" @implementation DJIconView - (instancetype)initWithFra ...

  6. 【荐】JavaScript编码风格

    作者:阮一峰 Douglas Crockford是 JavaScript 权威,Json 格式就是他的发明. 去年 11 月他有一个演讲(Youtube),谈到了好的 JavaScript 编程风格是 ...

  7. 【转】PHP curl CURLOPT_HTTPHEADER设置HOST

    为了安全,我们的web服务主机往往不能上网.维护的时候,也是通过跳板机,ssh登录后去操作. 有时候我们的程序需要访问外网.比如需要调用外网其他程序的某个接口.这下该怎么办呢? 我们可以通过PHP的C ...

  8. 【Android学习】android布局中几个距离单位的区别:px、dp、sp

    一.px 像素,我们经常说的400*800这种的就是像素,这个比较好理解. 二.dp 要理解dp,首先要先引入dpi这个概念,dpi全称是dots per inch,对角线每英寸的像素点的个数,所以, ...

  9. 【Python网络爬虫一】爬虫原理和URL基本构成

    1.爬虫定义 网络爬虫,即Web Spider,是一个很形象的名字.把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛.网络蜘蛛是通过网页的链接地址来寻找网页的.从网站某一个页面(通常 ...

  10. 【Python基础学习五】列表,元祖,字典

    1.列表(list) 列表是Python的一种内置数据类型,list是一种有序的集合,可以随时添加和删除其中的元素,就像动态数组一样.获取list中的元素用角标获取,角标可以使用正角标,也可以使用负角 ...