<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义javascript事件</title>
<script type="text/javascript">
var EventTarget = function() {
this._listener = {};
};
EventTarget.prototype = {
constructor: this,
addEvent: function(type, fn) {
if (typeof type === "string" && typeof fn === "function") {
if (typeof this._listener[type] === "undefined") {
this._listener[type] = [fn];
} else {
this._listener[type].push(fn);
}
}
return this;
},
addEvents: function(obj) {
obj = typeof obj === "object"? obj : {};
var type;
for (type in obj) {
if ( type && typeof obj[type] === "function") {
this.addEvent(type, obj[type]);
}
}
return this;
},
fireEvent: function(type) {
if (type && this._listener[type]) {
//event参数设置
var events = {
type: type,
target: this
};
for (var length = this._listener[type].length, start=0; start<length; start+=1) {
//改变this指向
this._listener[type][start].call(this, events);
}
}
return this;
},
fireEvents: function(array) {
if (array instanceof Array) {
for (var i=0, length = array.length; i<length; i+=1) {
this.fireEvent(array[i]);
}
}
return this;
},
removeEvent: function(type, key) {
var listeners = this._listener[type];
if (listeners instanceof Array) {
if (typeof key === "function") {
for (var i=0, length=listeners.length; i<length; i+=1){
if (listeners[i] === key){
listeners.splice(i, 1);
break;
}
}
} else if (key instanceof Array) {
for (var lis=0, lenkey = key.length; lis<lenkey; lis+=1) {
this.removeEvent(type, key[lenkey]);
}
} else {
delete this._listener[type];
}
}
return this;
},
removeEvents: function(params) {
if (params instanceof Array) {
for (var i=0, length = params.length; i<length; i+=1) {
this.removeEvent(params[i]);
}
} else if (typeof params === "object") {
for (var type in params) {
this.removeEvent(type, params[type]);
}
}
return this;
}
};
var myEvents = new EventTarget();
myEvents.addEvents({
"once": function() {
alert("该弹框只会出现一次!");
this.removeEvent("once");
},
"infinity": function() {
alert("每次点击页面,该弹框都会出现!");
}
});
document.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (!target || !/input|pre/i.test(target.tagName)) {
myEvents.fireEvents(["once", "infinity"]);
}
};
</script>
</head>
<body>
</body>
</html>
分享到:
相关推荐
一个非常小的 javascript 库,用于广播和侦听自定义 javascript 事件。 它允许对同一事件的多个侦听器进行侦听和调用。 使用它非常强大但很容易......例如: //specify functions to call function callMe ( msg ...
javascript实现自定义事件,纯javascript不含vbscript。 通过自定义的HashMap.js和EventManager.js实现自定义事件的监听addEvent和发布fireEvent
自定义JavaScript弹出框组件自定义JavaScript弹出框组件
1、超简单JavaScript自定义对象的自定义事件机制示例。 2、带示例及详细注释,总共40行左右的代码。支持多播、任意多个参数。 3、不需要定义和引用其它任何东东。
自定义javascript 工具类
网上使用java开发sonarqube的检测规则的文档很少,本文档较为详细描述了JavaScript扩展的开发过程。
自定义javascript的Map类,使用习惯完全依据于java的map使用习惯编写,java中map的用法基本一样,导入包即可使用
javascript十个最常用的自定义函数javascript十个最常用的自定义函数javascript十个最常用的自定义函数javascript十个最常用的自定义函数javascript十个最常用的自定义函数javascript十个最常用的自定义函数
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]
js模拟as的自定义事件,能自己触发,适用于游戏等行业开发
随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率。 简单的事件需求 事件并不是可有可无,在某些需求下是必需的。以一个很简单的需求为...
javascript自定义事件功能与用法实例分析.docx
NULL 博文链接:https://chengdu.iteye.com/blog/265522
本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考,具体如下: 前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。 下面介绍JavaScript中的模拟事件和...
javascript自定义滚动条样式|javascript自定义滚动条样式|javascript自定义滚动条样式|
Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加、删除事件。 下面通过实例,一步一步构建一个具体的Javascript自定义事件对象...
变量-自定义Javascript-GTM 变量Tipo“自定义Javascript”段Google跟踪代码管理器: {{JS单击Mailto}} {{JS Click Phone}} {{JS是移动的}} {{JS单击文件扩展名}} 执照 根据MIT许可获得许可。
本文实例讲述了javascript自定义事件功能与用法。分享给大家供大家参考,具体如下: 概述 自定义事件很难派上用场? 为什么自定义事件很难派上用场,因为以前js不是模块化开发,也很少协作。因为事件本质是一种通信...
网络注入 Chrome扩展程序可将自定义JavaScript注入每个页面
您可以基于域或自定义正则表达式(自v3.1.1起)注入自定义JavaScript。 自v2.5.1以来,此扩展支持专用选项卡来编辑您的代码 您可以使用一些内置库,例如 *jQuery1.12.4 *jQuery2.2.4 *jQuery3.2.1 *无限可观察...