javascript中自定义事件
自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用。
- function EventTarget(){
- this.handlers={};
- }
- EventTarget.prototype={
- constructor:EventTarget,
- addHandler:function(type,handler){
- if(typeof this.handlers[type]=='undefined'){
- this.handlers[type]=new Array();
- }
- this.handlers[type].push(handler);
- },
- removeHandler:function(type,handler){
- if(this.handlers[type] instanceof Array){
- var handlers=this.handlers[type];
- for(var i=0,len=handlers.length;i<len;i++){
- if(handler[i]==handler){
- handlers.splice(i,1);
- break;
- }
- }
- }
- },
- trigger:function(event){
- if(!event.target){
- event.target=this;
- }
- if(this.handlers[event.type] instanceof Array){
- var handlers=this.handlers[event.type];
- for(var i=0,len=handlers.length;i<len;i++){
- handlers[i](event);
- }
- }
- }
- }
addHandler方法用于添加事件处理程序,removeHandler方法用于移除事件处理程序,所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件,该方法接收一个至少包含type属性的对象作为参数,触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。
- function onClose(event){
- alert('message:'+event.message);
- }
- var target=new EventTarget();
- target.addHandler('close',onClose);
- //浏览器不能帮我们创建事件对象了,自己创建一个,自定义事件对象的属性
- var event={
- type:'close',
- message:'Page Cover closed!'
- };
- target.trigger(event);
javascript中自定义事件的更多相关文章
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- 详解javascript实现自定义事件
这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
随机推荐
- QCW切割 --铁片
1.QCW切割旋转轴限位部件 --刘锦峰协助 :铁片 功率85% 最大功率100 最小功率50 脉宽0.1ms 调整焦点-0.5左右
- BCB中AnsiString类方法小结
AnsiString类是BCB中最常见类之一,了解它对以后深入学习BCB大有帮助. 介绍AnsiString类之前,先要介绍一些背景知识.VCL(Visual Component Library 可视 ...
- ElasticSearch入门(3) —— head插件
#### 安装ES head插件 具体请参考github地址:https://github.com/mobz/elasticsearch-head 使用 安装Install # 在线安装head插件 ...
- ArrayList , Vector 数组集合
ArrayList 的一些认识: 非线程安全的动态数组(Array升级版),支持动态扩容 实现 List 接口.底层使用数组保存所有元素,其操作基本上是对数组的操作,允许null值 实现了 Randm ...
- 记录一下从懵懂到理解RESTful的过程
前言 Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)R ...
- Node.js之循环依赖
在Node.js中有可能会出现循环依赖的问题,在此做一个简单的记录 假如有一个模块A: exports.loaded = false; const b = require('./b'); module ...
- Python实战之字符串的详细简单练习
['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...
- 举例:使用XML库的方式,实现RPC通信
1.先说结论:使用xml-rpc的机制可以很方便的实现服务器间的RPC调用. 2.试验结果如下: 3.源码如下: 服务器端的源代码如下: import operator, math from Simp ...
- 【懒人有道】在asp.net core中实现程序集注入
前言 在asp.net core中,我巨硬引入了DI容器,我们可以在不使用第三方插件的情况下轻松实现依赖注入.如下代码: // This method gets called by the runti ...
- VUE长按事件
PS:在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data- ...