在开发过程中,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. Pyhton模块和包

    一 模块 1.1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用pytho ...

  2. 【转载】 Asp.Net安全之防止脚本入

    在ASP.NET开发过程中,安全性是必须要重中之重需要考虑的,其中一种情况是要防止用户输入恶意脚本入侵的情况,恶意脚本入侵指的是用户在提交内容中提交了包含特殊Javascript脚本程序等非法信息,如 ...

  3. JS权威指南读书笔记(三)

    第七章 数组 1 数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快的多. 2 数组直接量的语法允许有可选的结尾的逗号,故[ ; ; ]只有两个元素而非三个. 3 调用构 ...

  4. springboot 常见的启动器

    <!--pringBoot提供了一个名为spring-boot-starter-parent的工程, 里面已经对各种常用依赖(并非全部)的版本进行了管理 我们的项目需要以这个项目为父工程,这样我 ...

  5. 如何在SAP云平台ABAP编程环境里把CDS view暴露成OData服务

    Jerry 2016年在学习SAP CDS view时,曾经写过一个CDS view的自学系列,其中有一篇提到了一个很方便的注解: @OData.publish: true 加上这个注解的CDS vi ...

  6. 【leetcode】338 .Counting Bits

    原题 Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate t ...

  7. 认识和学习redis

    redis VS mysql """ redis: 内存数据库(读写快).非关系型(操作数据方便) mysql: 硬盘数据库(数据持久化).关系型(操作数据间关系) 大量 ...

  8. JAVA笔记整理(九),JAVA中的集合

    在工作中,我们经常需要将多个对象集中存放,可以使用数组,但是数组的长度一旦固定之后是不可变的,为了保存数量确定的数据,我们可以使用JAVA中的集合. 在我看来,JAVA中的集合可以看作是一个特殊的数据 ...

  9. Formal Analysis of the TLS Handshake Protocol -----论文整理

    1.关键词  TLS.SSL.Formal Analsysis  Conridentiality  Secerecy 2.Table  THE SSL/TLS handshake Protocol 3 ...

  10. Linux系统用终端打开图片

    一.现在开发多数使用的系统都是linux系统,但有的时候会遇到一些比较麻烦的小问题,比如:在某个文件夹中存入大量的图片时,想要查看某张图片的时候,当你使用图形化显示的时候,就会很卡,所以在这里我针对于 ...