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. Flash调用麦克风

    import flash.events.ActivityEvent;import flash.media.Microphone;var deviceArray:Array = Microphone.n ...

  2. .Net 中的反射(查看基本类型信息) - Part.2

    反射概述 和Type类 1.反射的作用 简单来说,反射提供这样几个能力:1.查看和遍历类型(及其成员)的基本信息和程序集元数据(metadata):2.迟绑定(Late-Binding)方法和属性.3 ...

  3. 深入理解redis持久化

    持久化方式: 快照(RDB)方式,默认方式,文件以二进制方式保存到RDB文件. 文件追加(AOF)方式,文件以协议文本的方式write到AOF文件. 作用,重启后的数据恢复.当两种方式都启用时,red ...

  4. boost之lexical_cast

    第一次翻译,虽然是个很简单的函数介绍... 文件boost/lexical_cast.hpp中定义了此函数: namespace boost { class bad_lexical_cast; tem ...

  5. [NHibernate]条件查询Criteria Query

    目录 写在前面 文档与系列文章 条件查询 一个例子 总结 写在前面 上篇文章介绍了HQL查询,我个人觉得使用ORM框架就是为了让少些sql,提高开发效率,而再使用HQL就好像还是使用sql,就觉得有点 ...

  6. UGUI

    http://www.2fz1.com/post/unity-ugui-recttransform/ //this.transform.position 获取的是世界坐标,而 this.transfo ...

  7. golang笔记——string

    任何语言中,字符串操作API都是非常重要的,有些还是熟记比较好,当然如果记不住可以去看源码文件,不得不说GO语言源码看起来非常舒服. 可以使用反引号代替双引号,来表示原生的字符串,即不进行转义,尤其适 ...

  8. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  9. Bash 是如何从环境变量中导入函数的

    在上文中曾说到: 所谓的环境变量的真实面目其实就是个任意字符串 Bash 在启动时会将 environ 数组中包含 = 号的字符串导入成为自己的变量 Bash 在启动外部命令时会将自己内部标记为环境变 ...

  10. 评价cnblogs.com的用户体验

    我们作为大学计算机科学与技术专业的本科生,使用博客园主要是用来搜索和阅读技术资料,并且使用它来编辑发表博客.我们偏向于搜索便捷,界面友好的网站风格.我们对cnblogs的期望是更便捷精准,更便于编辑. ...