`

原生js事件的添加和删除的封装

 
阅读更多

具体可参考http://blog.csdn.net/myjlvzlp/article/details/8121696

 

在IE浏览器中添加或删除事件用attachEvent、detachEvent。

在其他标准浏览器中则用addEventListener、removeEventListener。

下面的对事件的添加和删除做了封装。直接看代码吧！

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
  if (target.addEventListener) {// 非ie 和ie9
    target.addEventListener(type, func, false);
  } else if (target.attachEvent) { // ie6到ie8
    target.attachEvent("on" + type, func);
  } else {
    target["on" + type] = func; // ie5
  }
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
  if (target.removeEventListener) {
    target.removeEventListener(type, func, false);
  } else if (target.detachEvent) {
    target.detachEvent("on" + type, func);
  } else {
    target["on" + type] = null;
  }
}

 为HTML元素添加一个事件监听:

1.利用元素事件属性添加事件处理函数
2.利用attachEvent方法添加事件处理函数

这两种方法处理事件有很大区别的,事件属性只能赋值一种方法，即：

button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了,而添加事件监听就可以并行。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript事件监听示例</title>
</head>
<body>
	<button id="mybtn">测试</button>
	
	<script type="text/javascript">
	/// <summary>
	/// 添加事件监听
	/// </summary>
	/// <param name="target">载体</param>
	/// <param name="type">事件类型</param>
	/// <param name="func">事件函数</param>
	function addEventHandler(target, type, func) {
		if (target.addEventListener){
			target.addEventListener(type, func, false);
		}else if (target.attachEvent){
			target.attachEvent("on" + type, func);
		}else{
			target["on" + type] = func;
		}
	}
	/// <summary>
	/// 移除事件监听
	/// </summary>
	/// <param name="target">载体</param>
	/// <param name="type">事件类型</param>
	/// <param name="func">事件函数</param>
	function removeEventHandler(target, type, func) {
		if (target.removeEventListener){
			target.removeEventListener(type, func, false);
		}else if (target.detachEvent){
			target.detachEvent("on" + type, func);
		}else{
			delete target["on" + type];
		}
	}
	var mybtn = document.getElementById("mybtn");
	var mybtnClick = function() {
		alert(1); 
	};
	addEventHandler(mybtn, "click",  mybtnClick);
	addEventHandler(mybtn, "click", function() { alert(2); } );
	addEventHandler(mybtn, "click", function() { alert(3); } );
	removeEventHandler(mybtn, "click", function() { alert(2); } ); // 移不出(原因：此处为一个新的匿名对象，其实是移除了该匿名对象)
	removeEventHandler(mybtn, "click", mybtnClick); // 能移除(原因：此处为对象引用，移除引用对象)
</script>
</body>
</html>

 添加事件监听:不仅可以对同一事件添加多个处理函数对象，而且不会彼引覆盖，也不会覆盖通过属性添加的函数对象。

他们会按序运行，在IE中：先添加的后运行，而在FF中先添加的先运行。

经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3

 

 下面说一下，原生态事件监听的commonjs写法

添加事件监听的时候，返回处理的方法。

删除事件监听时，只能通过返回的方法才可以，代码如下

 

<!DOCTYPE HTML>
<html>
<head>
	<title>timeline脚本</title>
	<script type="text/javascript" src="scripts/lib/sea-2.2.3.js"></script>
	<script type="text/javascript">
		seajs.config({
			base:'./scripts',
			alias:{
				'jQuery': 'lib/jquery-1.8.1.js',
				'Raphael': 'lib/raphael-2.1.3.js',
				'Buzz': 'lib/buzz-1.1.8.js'
			}
		});
		seajs.use('main', function(main){
				main.start();
		});
	</script>
</head>
<body>
	<canvas id="myview">您的浏览器不支持，请更换现代浏览器</canvas>
	<div id="extra"></div>
	<div id="test" style="width: 200px; height: 200; background: red;">Test</div>
</body>
</html>

 

define(function(require, exports, module){
	var Hous = require("lib/hous");
	exports.start = function(){
		var test = document.getElementById("test");
		this.addEvent(test, "click", this.myclick);
		//注意这里方法的返回值，这是重点哦
		var my = this.addEvent(test, "mouseover", function(){
			alert("1");
		});
                //只有通过这个返回方法，才可以进行事件的删除
		this.delEvent(test, "mouseover", my);
	};
	exports.myclick = function(){
		alert("添加事件");
	};
	exports.mymouseover = function(){
		alert("鼠标经过事件");
	};
	exports.addEvent= function(target, name, fn){
		var call = function(){
			fn.apply(target, arguments);
		};
		if(target.dom){
			target = target.dom;
		}
		if(window.attachEvent){
			target.attachEvent("on" + name, call);
		}else if(window.addEventListener){
			target.addEventListener(name, call, false);
		}else{
			target["on" + name] = call;
		}
		return call;
	};
	exports.delEvent=function(target, name, fn){
		if(window.detachEvent){
			target.detachEvent("on" + name, fn);
		}else if(window.removeEventListener){
			target.removeEventListener(name, fn, false);
		}else if(target["on" + name] == fn){
			target["on" + name] = null;
		}
	};
	
});

 

 

 

 

分享到：
| mysql中的常用函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js原生事件封装大全

    event 添加事件，删除事件，以及冒泡的屏蔽，并都做了兼容性的处理，getByClass 对原生获取class的封装，鼠标拖拽事件的封装，键盘事件的封装

    原生js封装添加class,删除class的实例

    下面小编就为大家带来一篇原生js封装添加class,删除class的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助

    jquery.my.js

    用JavaScript原生封装的一个jQuery库，可供大家学习底层封装原理。有addClass 添加类，removeClass 删除类，toggleClass 切换类，each 遍历函数，show() 显示， hide() 隐藏，toggle() 切换， html() 获取或设置html...

    js轮播图之旋转木马效果

    接下来就是最主要的，封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值（兼容ie8） function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)...

    ThinkPHP聊天室即时通讯系统 H5聊天系统APP源码 类似微信的聊天APP

    用Dcloud 的 uni-app全系,基于vue.js和微信小程序开发模式。 目前支持APP（android、ios）、H5、微信小程序、支付宝小程序5端。 在特定场景可以用weex进行原生渲染。 APP用的是Dcloud 公司的H5+进行原生接口调用...

    dotNetFlexGrid

    dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易用的使用...

    异步表格控件源码下载

    dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易用的使用...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    java开源包1

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    Vue面试题 .docx

    v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了。 4. 如何让 CSS 只在当前组件中起作用：在组件中的 style 前面加上 scoped。 5. `&lt;keep-alive&gt;&lt;/keep-alive&gt;` 的作用：使被包含的...

    java开源包11

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包2

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包3

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包6

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包5

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包10

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

Magicbox
Global site tag (gtag.js) - Google Analytics