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. backup mysql

    #!/bin/bashcd /home/Licw/backup_openDBNow=$(date +"%m-%d-%Y--%H:%M:%S")#echo $NowFile=$Now ...

  2. HTTP Content-type 对照表

    Application Type 文件扩展名 Content-Type(Mime-Type) 描述 . application/x-   .* application/octet-stream 二进制 ...

  3. sql 的实用函数(包含日期函数、截取字符串函数)

    CONVERT() 函数是把日期转换为新数据类型的通用函数. CONVERT() 函数可以用不同的格式显示日期/时间数据. 语法 CONVERT(data_type(length),data_to_b ...

  4. Spring JdbcTemplate 方法详解

    JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...

  5. YII2生成增删改查

    下载完成后在basic/db.php配置数据库参数. 1.配置虚拟主机后进入YII入口文件 index.php 进行get传值 ?r=gii ,进入创建界面 2.点击 Model Generator下 ...

  6. shell的一些应用场景

    列出每个IP的连接数 netstat -n | awk '/^tcp/{print $5}' | awk -F: '!/^::/{print $1}' | sort | uniq -c | sort ...

  7. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  8. Path Sum

    需如下树节点求和 5  /  \ 4     8  /     /  \ 11  13    4 / \     /  \  7    2      5   1 JavaScript实现 window ...

  9. mysql 存储引擎

    什么是MySql数据库 通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合.    我们通常说的MySql数据库,sql server数据库等等 ...

  10. Qt、VTK配置常见问题

    QVTKWidget undefined reference to 问题,一定要在pro文件中添加库 libvtkGUISupportQt-6.3. 2. CMAKE_MAKE_PROGRAM     ...