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);

转载于:https://www.cnblogs.com/lydialee/p/4269379.html

javascript中自定义事件相关推荐

12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等由于DOM是一个树结构,如果在 ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
一个不错的讲解flex 3中自定义事件的文章
一个不错的讲解flex 3中自定义事件的文章 http://wangyisong.javaeye.com/blog/376118,一个不错的讲解flex 3中自定义事件的文章 posted on 20 ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
理解JavaScript中的事件
在很多语言的学习中,"事件"都是一个比较难理解,但是又是一个很重要的概念.JavaScript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果.本文就讨论一下J ...
php event loop,理解javascript中的事件循环(Event Loop)
背景在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...

javascript中自定义事件

javascript中自定义事件相关推荐

最新文章

热门文章