<!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
1、超简单JavaScript自定义对象的自定义事件机制示例。 2、带示例及详细注释，总共40行左右的代码。支持多播、任意多个参数。 3、不需要定义和引用其它任何东东。
在网页开发中，自定义JavaScript弹出框组件是不可或缺的一部分，它允许开发者创建具有高度定制化功能的对话框，以满足各种用户交互需求。本文将深入探讨如何利用JavaScript实现这样的组件，包括其基本原理、设计思路...
自定义事件是JavaScript中一个强大的功能，它允许开发者创建灵活且功能丰富的事件系统。通过本文的介绍，你应该对如何在JavaScript中创建和使用自定义事件有了深入的理解。记住，合理地使用自定义事件可以显著提升你...
自定义javascript 工具类
在JavaScript中，自定义事件是一种强大的机制，它允许开发者创建自己的事件类型，以便在不同的对象之间传递信息或协调状态更新。这种技术对于大型应用程序或游戏的模块化和解耦至关重要。在JavaScript中实现自定义...
这篇博客“10个常用自定义JavaScript函数”提供了十个非常实用的函数示例，旨在提升开发效率。虽然描述中没有给出具体的函数内容，但我们可以基于常见的JavaScript功能来推测和解释这些函数可能涉及的知识点。 1. *...
### JavaScript自定义事件功能与用法实例分析 #### 概述 在JavaScript中，自定义事件（也称为自定义事件）是一种强大的工具，允许开发者在不同的模块或组件之间建立通信渠道。这种通信机制基于观察者模式，即一个...
【标题】"python自学教程-04-自定义JavaScript.ev4.rar" 提示我们这是一个关于Python编程学习的教程，特别是涉及到与JavaScript交互的部分。在Python中，与JavaScript交互通常是通过Web开发或者数据交换的需求，例如...
自定义javascript的Map类，使用习惯完全依据于java的map使用习惯编写，java中map的用法基本一样，导入包即可使用
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为jQuery添加自定义事件机制，这将帮助开发者扩展jQuery的功能，实现更加个性化的...
随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。 简单的事件需求 事件并不是可有可无，在某些需求下是必需的。以一个很简单的需求为...
本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考，具体如下： 前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。 下面介绍JavaScript中的模拟事件和...
在JavaScript中，我们可以使用DOM操作、事件监听和自定义CSS样式来构建这样的组件。首先，我们需要一个包含选项的HTML结构，通常由一个父级元素（如`<div>`）和若干个子级元素（如`<li>`）组成，这些子级元素代表...
- 学习如何编写和注册自定义JavaScript事件处理程序，以实现动态交互效果。 - 理解何时和如何在模板中添加自定义HTML，以实现布局和功能的扩展。 总之，"hook-theme_hookwebsite_"项目是一个宝贵的学习资源，帮助...
在这个场景中，"Chrome扩展程序可将自定义JavaScript注入每个页面"指的是开发者可以利用Chrome浏览器的扩展开发机制，创建插件并在用户浏览网页时自动在页面上下文中执行自定义的JavaScript代码，实现各种定制化需求...
本主题将深入探讨如何使用JavaScript实现滚动条的自定义和美化。 首先，我们要了解浏览器对滚动条的支持情况。不同的浏览器（如Chrome、Firefox、Safari等）对滚动条样式的定制能力各不相同。在一些现代浏览器中，...
变量-自定义Javascript-GTM 变量Tipo“自定义Javascript”段Google跟踪代码管理器： {{JS单击Mailto}} {{JS Click Phone}} {{JS是移动的}} {{JS单击文件扩展名}} 执照 根据MIT许可获得许可。