JavaScript--自定义事件Event
在开发过程中,js原生事件不足以满意开发需求,需要开发者自定义事件。
一、Event
Event()构造函数创建一个新的Event。
event = new Event(typeArg,eventInit);
typeArg
事件名称。
eventInit
这是一个对象,包含以下字段:
例
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的更多相关文章
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- 自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...
- 高级功能:很有用的javascript自定义事件
之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...
随机推荐
- Django学习笔记 (一) 开发环境配置
Django是一个开放源代码的Web应用框架,由Python写成. 采用了MVC的软件设计模式,即模型M,视图V和控制器C. 1. Python安装 下载地址: http://www.python.o ...
- CSS ,flex: 1的用处
flex: 1:的妙用 首先 flex 是 flex-grow.flex-shrink.flex-basis的缩写. 当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex- ...
- PLSQL Developer新建表空间
转自:https://www.cnblogs.com/juddhu/archive/2012/03/20/2408499.html 通过pl/sql登录到Oracle数据库上,然后执行菜单:文件/新建 ...
- shell 脚本总结
一.SHELL脚本是什么?它是必需的吗? 一个SHELL脚本就是一个文本文件,它包含一个或多个命令.系统管理员会经常需要使用多个命令来完成一项任务,此时可以添加这些所有命令在一个文本文件(SHELL脚 ...
- WebService 规范
详见:https://blog.csdn.net/u011165335/article/details/51345224 JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-R ...
- javascript_04-类型转换
类型转换 掌握三种类型的转换 转换成字符串类型 转换成数值类型 转换成布尔类型 转换成字符串 1.几乎每一个值都有 toString() 方法,除了 null 和 undefined. var age ...
- spice在桌面虚拟化中的应用系列之三(USB映射实现,SSL加密,密码认证,多客户端支持)
本系列其它文章 spice在桌面虚拟化中的应用系列之一(spice简介,性能优化等) spice在桌面虚拟化中的应用系列之二(Linux平台spice客户端的编译安装,支持USB映射) 1.spice ...
- Oracle前期工具【1】
目录: 1.oracle下载安装[Oracle11g] 2.Oracle客户端工具下载安装 [sqldeveloper.exe] 3.cmd进入Oracle命令界面操作 4.客户端图形化命令操作 or ...
- 用js刷剑指offer(二叉搜索树的后序遍历序列)
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 牛客网链接 js代码 function Verif ...
- 模仿DotnetCore中间件的方式,做一个列表过滤的功能
我们的很多功能当中都会遇到对版本进行过滤的场合,例如你可能需要对列表中的数据的时间进行过滤.版本过滤.渠道以及地区信息进行过滤. 原本的做法:设计很多个过滤方法,通过枚举的方式组合,选择需要过滤哪些方 ...