在开发过程中,js原生事件不足以满意开发需求,需要开发者自定义事件。

一、Event

Event()构造函数创建一个新的Event。

event = new Event(typeArg,eventInit);

typeArg

事件名称。

eventInit

这是一个对象,包含以下字段:

  • bubbles:(可选)Boolean指示事件是否冒泡。默认是false

  • cancelable:(可选)a Boolean表示是否可以取消该事件。默认是false

var _event = new Event('eventName', {"bubbles":true, "cancelable":false});

//dispatchEvent派发事件
document.dispatchEvent(_event); myDom.dispatchEvent(evt);

二、事件逻辑

自定义的事件可以绑定到DOM元素上定义事件处理逻辑,然后通过dispatchEvent派发事件。

var _event = new Event('look', {"bubbles":true, "cancelable":false});

    document.addEventListener('look', function(){
console.log('lootEvent_document');
}); myDom.addEventListener('look', function(){
console.log('lootEvent_myDom');
}); myDom.dispatchEvent(_event); //lootEvent_myDom lootEvent_document document.dispatchEvent(_event); //lootEvent_document

因为我们定义的事件是冒泡的,所以在myDom上触发look事件会冒泡到document上去。

JavaScript--自定义事件Event的更多相关文章

  1. javascript 自定义事件 发布-订阅 模式 Event

    * javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...

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

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

  3. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  4. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

  5. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  6. Javascript 自定义事件 (custom event)

    Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...

  7. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

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

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

  9. JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

    在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...

  10. 高级功能:很有用的javascript自定义事件

    之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...

随机推荐

  1. .net core微信群图片合并

    引用:SixLabors.ImageSharp,SixLabors.ImageSharp.Drawing,System.Drawing.Common /// <summary> /// 群 ...

  2. 总结一下几个for循环常见用法和区别

    1.for循环//有人喜欢使用一个临时变量把长度缓存起来,说是数据量大时效果更好(我本人没有去验证) for(j = 0,len=arr.length; j < len; j++) { //执行 ...

  3. cmd修改路径

    1.  切换盘符:    输入X:(例如C:)+回车 2.  查看当前目录下的文件:输入dir+回车 3.  选择想要的文件,输入:cd+文件名

  4. C++ 解决文件重复包含

    // 如果zzz没有定义就定义zzz,然后执行下面的代码,定义了就不执行 #if !defined(zzz) #define zzz struct PPoint { int x; int y; }; ...

  5. STM32复位及通过函数判断是何种条件出发的复位

    STM32F10xxx支持三种复位形式,分别为系统复位.上电复位和备份区域复位. 一.系统复位: 系统复位将复位所有寄存器至它们的复位状态. 当发生以下任一事件时,产生一个系统复位: 1. NRST引 ...

  6. 数据库中的Schema到底是什么

    参考:http://database.guide/what-is-a-database-schema/ 在数据库中,schema(发音 “skee-muh” 或者“skee-mah”,中文叫模式)是数 ...

  7. windows虚拟机性能调整

    在通过KVM安装WindowsXP/2003/7/2008操作系统后,由于默认的磁盘驱动(IDE)性能与网卡驱动(RTL8139100M)的性能都极其低下,需要调整,通过加载Redhatvirtio驱 ...

  8. 配置多网卡多IP的方式

    [root@web01 conf.d]# cat ip.conf server {     listen 10.0.0.7:80;     server_name _;       location ...

  9. Java关键字—final

    final—不可变的,用来说明最终属性,表明一个类不能派生出子类,或者成员方法不能被覆盖,或者成员域的值不能被改变. 修饰范围: 1.修饰类,被final关键字修饰的类无法被继承: 2.修饰方法,被f ...

  10. 【最短路+较复杂处理】PAT-L3-005. 垃圾箱分布

    L3-005. 垃圾箱分布 大家倒垃圾的时候,都希望垃圾箱距离自己比较近,但是谁都不愿意守着垃圾箱住.所以垃圾箱的位置必须选在到所有居民点的最短距离最长的地方[此处为第一重排序选择的条件],同时还要保 ...