在开发过程中,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. js按钮频繁提交解决方案:

    1.封装js: /// 函数节流 xhz.canRun = true; xhz.Throttling = function () { if (!xhz.canRun) { layer.msg('处理中 ...

  2. Unity_如何判断应用设备内存小于1G(内容可定制为根据机器配置进行不同LOD)

    直接上脚本,需要用的时候在需要的地方调用就好. 如: //获取设别的最大内存,作为判断LOD等级和决定1G以下设备不能进游戏 #if UNITY_ANDROID && !UNITY_E ...

  3. 《图解HTTP》摘录

    # 图解HTTP 第 1 章 了解Web及网络基础 1.1使用http协议访问web 客户端:通过发送请求获取服务器资源的Web浏览器等. Web使用一种名为 HTTP(HyperText Trans ...

  4. 【转载】2018年最值得期待的5大BPM厂商

    部署BPM软件可以帮助企业获得竞争优势,通过分析.设计.执行.控制和调节业务流程协助企业领导者提高组织绩效. 业务流程管理(BPM)是指随着公司和组织的发展匹配业务目标和流程的行为.部署BPM软件可以 ...

  5. springboot系列(十)springboot整合shiro实现登录认证

    关于shiro的概念和知识本篇不做详细介绍,但是shiro的概念还是需要做做功课的要不无法理解它的运作原理就无法理解使用shiro: 本篇主要讲解如何使用shiro实现登录认证,下篇讲解使用shiro ...

  6. git 添加码云远程仓库和上传到码云的命令

     添加远程仓库 git remote add Zk  仓库地址.git 查看远程仓库 git remote -v 上传远程仓库 git push Zk master 删除远程仓库Zkgit remot ...

  7. Linux命令——rpm

    翻译自:20 Practical Examples of RPM Commands in Linux 国内译文:20个Linux中RPM命令的实际示例 前言 包管理机制——RPM.dpkg rpm本身 ...

  8. C++——多态性 与 虚函数

    多态性 多态性是面向对象程序设计的关键技术之一.若程序设计语言不支持多态性,不能称为面向对象的语言.利用多态性技术,可以调用同一个函数名的函数,实现完全不同的功能. 多态性(polymorphism) ...

  9. Windows——Office使用激活工具激活后仍提示激活

    问题: Office使用激活工具激活后仍提示激活 分析: 造成该问题的原因通常是未删除操作系统预置Office导致的, 解决方案: 调出运行,输入regedit打开注册表编辑器, 依次打开   HKE ...

  10. 全球化 System.Globalization.CultureInfo与RegionInfo类

    一.CultureInfo类:文化信息 分类: 1.中立文化(Neutral culture): zh-CHS:中文,无区域信息,无格式化信息 2.特定区域文化(Specific culture) z ...