在开发过程中,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. POJ1979(Red and Black)--FloodFill

    题目在这里 题目意思是这样的,一个人起始位置在    '@'  处,他在途中能到达的地方为 ' .  '     而  '#' 是障碍物,他不能到达. 问途中他所有能到达的   '.'的数量是多少 ? ...

  2. Html5知识精粹纪录

    1. HTML5文档的正文结构及新元素 正文结构: <header> <nav> <section> <aside> <footer> 深入 ...

  3. HTML中的图片标签的用法!

    在HTML中<img>这个标签是定义文本中的图片标签,它的作用就比如说可以提供图片的名字.提供图片的尺寸大小和提供图片的一些图片属性,比如Alt这个属性,可以给图片一个名称来告诉朋友们.这 ...

  4. View Controller Programming Guid for iOS 笔记

    1.View Controller 基础 1.1 View Controller 分类 ViewController分为container view controller 和content view ...

  5. arm9的操作模式,寄存器,寻址方式

    工作模式 Arm有7种工作模式: 名称 简称 简介 User Usr 正常用户程序执行的模式(linux下用户程序就是在这一模式执行的.) FIQ Fiq 快速中断模式 IRQ Irq 普通中断模式 ...

  6. Android笔记(十二)AndroidManiFest.xml

    AndroidManiFest.xml清单文件是每个Android项目所必须的,它是整个Android应用的全局描述文件.AndroidManiFest.xml清单文件说明了该应用的名称.所使用的图标 ...

  7. Centos7.6进入挂载硬盘后,进入应急模式(emergency mode)而非图形模式解决方法

    Centos7.6进入挂载硬盘后,进入应急模式(emergency mode)而非图形模式解决方法 话说某天我想在centos7.6中挂载个硬盘,结果刚在虚拟机中添加了一块硬盘,再次打开系统时,居然就 ...

  8. 团队第六次作业-Beta冲刺及发布说明

    1.相关信息 Q A 作业所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 作业要求 https: ...

  9. 9.1: 请每个小组在 cnblogs.com 上面创建团队博客,第一个博客把小组成员都介绍一下 #团队博客作业1------------------答题者:徐潇瑞

    大家好,我们这个团队的名字叫14组之家,之所以这么叫,因为我们是在章亦葵老师的现代软件工程课上成立为14组,而且我们每个组员在这个小家庭中都感受到温暖,我们互相协作,互相配合,来完成我们的任务. 首先 ...

  10. 运输层6——TCP可靠传输的实现

    目录 1. 以字节为单位的滑动窗口 2. 超时重传时间的选择 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户数据报协议UDP 运输层3- ...