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. django创建blog

    如果本文看不懂的,去看的我视频吧!http://www.testpub.cn/ ------------------------------------------- Django 自称是" ...

  2. php 月初,月末时间大统计

    //PHP获取指定月份的月初月尾时间 //获取上月月初月尾时间: $startday=strtotime(date("Y-m-d H:i:s",mktime(0,0,0,date( ...

  3. [转]js获取域名、url、url参数值

    //获取域名host1 = window.location.host;host2 = document.domain; //获取页面完整地址url = window.location.href; 获取 ...

  4. red hat关于桥接模式连不上外网或者没有IP

    很多人·在启动虚拟机后连接不上外网,即ifconfig没有ip地址,我总结了一下需要注意的地方: 以下全是在桥接模式. 1.在windows中打开任务管理器-->服务中找到一下几个服务,确保它们 ...

  5. 30个要点帮你完成java代码优化

    通过java代码规范来优化程序,优化内存使用情况,防止内存泄露 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容 ...

  6. Linux解压,压缩小总结

    linux下打包与解压的三种命令 最近在读<鸟歌的Linux私房菜基础篇>,想着总结一下所读知识,有益于理解. Linux下常用的命令有三种 gzip,zcat(用于zip,gzip等) ...

  7. iframe子页面点击按钮,执行父页面的点击事件

    iframe 子页面点击.parent 父页面  的id(auth-link-btn)的事件 <a href="javascript:void(0);" onclick=&q ...

  8. PHP慢脚本日志和Mysql的慢查询日志

    1.PHP慢脚本日志 间歇性的502,是后端 PHP-FPM 不可用造成的,间歇性的502一般认为是由于 PHP-FPM 进程重启造成的. 在 PHP-FPM 的子进程数目超过的配置中的数量时候,会出 ...

  9. 提高PHP代码质量的36个技巧

    1.不要使用相对路径 常常会看到: require_once('../../lib/some_class.php'); 该方法有很多缺点: 它首先查找指定的php包含路径, 然后查找当前目录. 因此会 ...

  10. .net 根据银行卡获取银行信息

    using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...