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. JS 验证数组中是否包含重复元素

    验证JS中是否包含重复元素,有重复返回true:否则返回false 方案一. function isRepeat(data) { var hash = {}; for (var i in data) ...

  2. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  3. 解决ArcGIS安装之后出现的Windows installer configures问题

    ----Please wait while Windows installer configures ArcGIS Desktop Error Message错误信息 When launching A ...

  4. ArcGIS Server开发教程系列(7)使用ArcGIS API for Javascript-Hello World

    ArcGIS API for Javascript  API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html 选择最新的下载就好了,目前是3 ...

  5. 【转~】初识贝塞尔曲线(Bézier curve)

    本文图文大多转自http://www.html-js.com/article/1628 QAQ我居然去扒维基,,,看不懂啊,,,我要去补数学,,, 在做变形小鸡的时候用到CSS3 transition ...

  6. There are no resources that can be added or removed from the server

    第1步.新建一个“Dynamic Web Project” 第2步.把新建项目里面的.project文件和.settings文件夹复制到导入的那个项目里面. 第3步.把web projiect set ...

  7. Github.com上有哪些比较有趣的PHP项目?

    链接就不贴了,可以在github上进行搜索.这里就不列举 symfony.laravel 这些大家都知道的项目了.只列举比较有意思的. swoole, C扩展实现的PHP异步并行网络通信框架,可以重新 ...

  8. PHP异常处理函数set_exception_handler()的用法

    定义和用法 set_exception_handler() 函数设置用户自定义的异常处理函数. 该函数用于创建运行时期间的用户自己的异常处理方法. 该函数会返回旧的异常处理程序,若失败,则返回 nul ...

  9. Two Sum Leetcode Java

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  10. sql语句,多个表之间,通过相同内容字段的联合查询

    1 , select j.id,         jt.Name,        j.ApproveType ,         j.ProductCode,         j.CustomerCo ...