在开发过程中,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. Python windows环境 搭建问题

    环境安装包下载地址: https://pan.baidu.com/s/1bnVhHMZ?fid=642139599707514 百度地址: http://sw.bos.baidu.com/sw-sea ...

  2. 线程一(lock)

    对于线程同步操作最简单的一种方式就是使用 lock 关键字,通过 lock 关键字能保证加锁的线程只有在执行完成后才能执行其他线程.   lock 的语法形式如下. lock(object) {    ...

  3. 关于/var/log/maillog 时间和系统时间不对应的问题 -- 我出现的是日志时间比系统时间慢12个小时

    那么让我们来见证奇迹的时刻吧!! 首先你要看下/etc/localtime的软连接,到哪了 一般就是这块出问题了 检查这里就绝对不会错的 对比图 : 这种情况, 删除/etc/localtime : ...

  4. rabbitmd

    一.前期准备   (1)条件:准备3台linux系统,确保能连到download.yunwei.edu   (2)编写yum源下载脚本: vim yum-repo.sh wget -O /etc/yu ...

  5. VBA switch语句

    当用户想要根据Expression的值执行一组语句时,使用Switch Case语句. 每个值被称为一个”情况”,并根据每种情况变量接通测试.如果测试表达式与用户指定的任何Case不匹配,则执行Cas ...

  6. Tomcat安装及环境配置

    欢迎任何形式的转载,但请务必注明出处. 本章内容 安装 环境变量入口 三个系统变量配置 测试安装配置是否成功 安装之前请安装jdk并进行环境配置(点击进入jdk教程) 一.安装 点击进入官网下载 二. ...

  7. 文件锁 flock/fcntl

    多个进程同时操作一个文件 1. flock int flock(int fd, int operation); LOCK_SH 建立共享锁定.多个进程可同时对同一个文件作共享锁定(读锁定) LOCK_ ...

  8. REST,以及RESTful的讲解

    详见:https://blog.csdn.net/qq_21383435/article/details/80032375 1.传统下的API接口对比规则概念REST 系统的特征演化优点&缺点 ...

  9. seo域名选择

    1-1第一选域名: 1,简单好记,有意义. 2,后缀首选com 其次cn 1-2购买域名网站有 1,阿里云 2,godaddy 3 ,景安 购买是可以在这三个域名平台都看看价格有些不一样.(可以省钱) ...

  10. 异常-Phoenix HBASE Last region should end with an empty key. You need to create a new region and regioninfo in HDFS to plug the hole

    1 详细异常信息 RROR: There is a hole in the region chain between \x03\x00\x00\x00\x00\x00\x00\x00\x00 and ...