<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>js事件封装</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input id="btn1" type="button" value="btn1" />
<input id="btn2" type="button" value="btn2" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
var Event = function(){
//保存注册事件数据
var eventMap = {};
//生成唯一key
function domKey(dom,type){
//id一般都是唯一的,如果没有id就用nodeName意思一下吧.
var id = dom.id || dom.nodeName;
var key = id + "-" + type;
return key;
}
//事件处理
function eventHandle(t,type,dom,fn,scope,data){
switch(t){
case 1:
var fun = function(evt){
evt = evt || event;
fn.apply(scope,[evt,data])
};
//拼接一个唯一的key,保存匿名事件函数
var key = domKey(dom,type);
eventMap[key] = eventMap[key] || [];
//保存函数指针,callee是调用自身函数
eventMap[key].push(fun);
//绑定事件
if(document.attachEvent){
//IE
dom.attachEvent("on" + type,fun);
}
else{
//非IE
dom.addEventListener(type,fun,false);
}
break;
case 2:
//移除事件
//比较遗憾的是,我还只能想到移除dom的全部事件,并不能移除dom的指定函数事件.
var key = domKey(dom,type);
var handler = eventMap[key];
if(handler instanceof Array){
for(var i = 0,len = handler.length; i < len; i++){
if(document.attachEvent){
dom.detachEvent("on" + type,handler[i]);
}
else{
dom.removeEventListener(type,handler[i],false);
}
}
eventMap[key] = [];
}
break;
}
}
//dom分析
function analyze(t,dom,type,fn,scope,data){
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//绑定事件
eventHandle(t,type,dom,fn,scope,data);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//绑定事件
eventHandle(t,type,dom,fn,scope,data);
}
}
}
function bind(dom,type,fn,scope,data){
analyze(1,dom,type,fn,scope,data);
}
function unbind(dom,type){
analyze(2,dom,type);
}
return {
bind:bind,
unbind:unbind
}
}();
//一个简单的例子
var name = "bobo";
function Test(){}
Test.prototype = {
name:"chxy",
say1:function(){
//this == Test
console.log(this.name + " say1");
},
say2:function(){
//this == window/Test
console.log(this.name + " say2");
}
};
var t = new Test();
var btn1 = document.getElementById("btn1");
Event.bind(btn1,"click",t.say1,t);
Event.bind(btn1,"click",t.say2,t);
var btn2 = document.getElementById("btn2");
Event.bind(btn2,"click",t.say2,window);
//移除dom全部事件
//Event.unbind(btn1,"click");
/*
这样事件类基本就封装好了,并且看上去已经很优化了.
不过还是有一个隐藏问题的,就是每次注册事件都需要判断浏览器类型,其实是做了很多次重复工作,
因为程序运行的时候,不可能中途换浏览器,所以应该只检测一次就可以了.
*/
var Event = function(){
//保存注册事件数据
var eventMap = {};
//生成唯一key
function domKey(dom,type){
//id一般都是唯一的,如果没有id就用nodeName意思一下吧.
var id = dom.id || dom.nodeName;
var key = id + "-" + type;
return key;
}
//添加事件,采用延迟加载
function addEvent(dom,type,fn){
if(document.attachEvent){
//IE
addEvent = function(dom,type,fn){
dom.attachEvent("on" + type,fn);
}
}
else{
//非IE
addEvent = function(dom,type,fn){
dom.addEventListener(type,fn,false);
}
}
//调用新函数,已经覆盖了原来的addEvent,不需要再判断浏览器了.
addEvent(dom,type,fn);
}
//删除事件,采用延迟加载
function removeEvent(dom,type,fn){
if(document.attachEvent){
removeEvent = function(dom,type,fn){
dom.detachEvent("on" + type,fn);
}
}
else{
removeEvent = function(dom,type,fn){
dom.removeEventListener(type,fn,false);
}
}
//调用新函数,已经覆盖了原来的removeEvent,不需要再判断浏览器了.
removeEvent(dom,type,fn);
}
//事件处理
function eventHandle(t,type,dom,fn,scope,data){
switch(t){
case 1:
var fun = function(evt){
evt = evt || event;
fn.apply(scope,[evt,data])
};
//拼接一个唯一的key,保存匿名事件函数
var key = domKey(dom,type);
eventMap[key] = eventMap[key] || [];
//保存函数指针,callee是调用自身函数
eventMap[key].push(fun);
//绑定事件
addEvent(dom,type,fun);
break;
case 2:
//移除事件
//比较遗憾的是,我还只能想到移除dom的全部事件,并不能移除dom的指定函数事件.
var key = domKey(dom,type);
var handler = eventMap[key];
if(handler instanceof Array){
for(var i = 0,len = handler.length; i < len; i++){
//移除事件
removeEvent(dom,type,handler[i]);
}
eventMap[key] = [];
}
break;
}
}
//dom分析
function analyze(t,dom,type,fn,scope,data){
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//绑定事件
eventHandle(t,type,dom,fn,scope,data);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//绑定事件
eventHandle(t,type,dom,fn,scope,data);
}
}
}
function bind(dom,type,fn,scope,data){
analyze(1,dom,type,fn,scope,data);
}
function unbind(dom,type){
analyze(2,dom,type);
}
return {
bind:bind,
unbind:unbind
}
}();
var btn1 = document.getElementById("btn1");
Event.bind(btn1,"click",t.say1,t);
Event.bind(btn1,"click",t.say2,t);
var btn2 = document.getElementById("btn2");
Event.bind(btn2,"click",t.say2,window);
/*
这样就只会有一次判断浏览器类型,是不是很有意思.
*/
/*
知识点:
1.apply/call可以动态改变函数的作用域
2.采用了匿名函数的方式封装事件接口.
*/
</script>
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
JAVASCRIPT 实现OPTION的事件触发
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
JavaScript事件是网页中发生的特定情况，例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器，我们可以在这些事件发生时执行相应的代码。常见的事件包括： 1. click：鼠标点击事件 2. keydown/keyup：键盘...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
如何给javascript js事件传递参数.zip
这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户提及的一个相关技术栈）、“web”（Web开发）以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
### 知识点详解：JS捕获后台事件 #### 一、概述 在现代Web开发中，JavaScript（简称JS）是实现网页动态交互的核心技术之一。通过JavaScript，开发者可以为网站添加各种各样的功能和效果，提升用户体验。本文将重点...
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
本篇文章将深入探讨如何使用JavaScript来监听和处理键盘事件，以及如何结合jQuery库（如`jquery-1.2.6.js`）和第三方插件（如`jquery.hotkeys.js`）来增强键盘控制的功能。 一、原生JavaScript键盘事件 1. `...
全面，直观javascript的事件
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件，专为开发者设计，用于快速集成到各种Web应用中，实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
本篇文章将深入探讨“事件发布/订阅模式”，并结合提供的`eventjs`模块进行详细讲解。 事件发布/订阅模式（也称为发布/订阅者模式或观察者模式）是一种设计模式，它允许对象之间的解耦。在这种模式中，我们有三个...
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]