addEventListener与removeEventListener实际应用

JavaScript 2013-11-05 addEventListener,removeEventListener

简单使用

addEventListener 添加监听事件函数,有三个参数

第一个参数:监听动作(必须)
第二个参数:触发函数(必须)
第三个参数:
一个bool类型。当为false时为冒泡获取(由里向外),true为capture方式(由外向里)。(可选)
关于第三个参数为事件冒泡方式,不在本文说明范围之内!

removeEventListener 移除解绑监听事件函数,有两个参数

第一个参数:监听动作(必须)
第二个参数:绑定动作指定的函数体(必须)

 

实例1,直接在参数内传入一个匿名函数体

element.addEventListener("click", function(){
	alert("Hello word!");	
});

这种方式最简便,但不能解绑监听动作,如以下代码是无效的:

// 这种解绑方式是无效的
element.removeEventListener("click", function(){
	alert("Hello word!");	
});

 

实例2,传入函数字面量

var handle = function(){
	alert("Hello word!");	
};

element.addEventListener("click", handle);

如果要解绑监听事件很容易,如下:

element.removeEventListener("click", handle);

复杂应用

然而实际业务需要还是复杂的很多,仍然需要我们精心设计。

如:

var main = function(){

	// 获取节点
	var button = document.querySelectorAll("button");

	// 获取一个随机数
	var rand = Math.random();

	// 单击处理函数
	var clickHandle = function(){
		alert(rand);
	};

	// 添加单击事件
	button[0].addEventListener("click", clickHandle);
};	

window.onload = main;

以上代码是一个很普通的业务,处理函数体内能访问到rand变量是因为处理函数clickHandle是在main函数里声明的。假如处理函数来自别处,如:

// 单击处理函数
var clickHandle = function(){
	// rand访问不到
	alert(rand);
};

var main = function(){

	// 获取节点
	var button = document.querySelectorAll("button");

	// 获取一个随机数
	var rand = Math.random();

	// 添加单击事件
	button[0].addEventListener("click", clickHandle);

};	

这样rand就访问不到了,所以对于addEventListener里的函数体如何传参数呢?我们可以这样做:

// 单击处理函数
var clickHandle = function(rand){
	return function(){
		alert(rand);
	};
};

var main = function(){

	// 获取节点
	var button = document.querySelectorAll("button");

	// 获取一个随机数
	var rand = Math.random();

	// 添加单击事件 把rand传入
	button[0].addEventListener("click", clickHandle(rand));

};	

window.onload = main;

clickHandle先接收参数,然后再return一个匿名函数,这样就解决了addEventListener函数体传参的问题,然而上面的方案并不是很完美,因为不能解绑:

// 虽然传入的参数相同,返回的函数也一样,但这样是无效的操作
button[0].removeEventListener("click", clickHandle(rand));

因为JavaScript不能像Python能打出ID值,但我觉得removeEventListener解绑时,会根据传入函数的内存地址去搜寻addEventListener时传入函数的内存地址是否匹配,如果匹配就可以执行解绑操作。比如下面这个DEMO就很好的说明了这个问题:

页面有如下标签:

<button>alert</button>

JS代码:

var main = function(){

	// 获取节点
	var button = document.querySelectorAll("button");

	var handle1 = function(){
		alert("handle1");
	};

	var handle2 = function(){
		alert("handle2");	
	};

	button[0].addEventListener("click", handle1);
	button[0].addEventListener("click", handle2);

};

button添加了两个click事件,分别对应不同的handle,单击button后,会分别alert出handle1与handle2,

此时,我们可以通过以下代码解绑其中一个监听事件,但不会影响其它事件的监听:

// 移除handle1的监听
button[0].removeEventListener("click", handle1);

因此回来看刚才的例子,完美的应该是这样:

// 单击处理函数
var clickHandle = function(rand){
	return function(){
		alert(rand);
	};
};

var main = function(){

	// 获取节点
	var button = document.querySelectorAll("button");

	// 获取一个随机数
	var rand = Math.random();

	// 获得匿名函数
	var handle = clickHandle(rand);

	// 添加单击事件 把rand传入
	button[0].addEventListener("click", handle);

	// 移除绑定事件
	button[0].removeEventListener("click", handle);

};

window.onload = main;

貌似没有一个API能查出一个节点被添加了哪些事件,这是一个缺陷,万一addEventListener以后忘了remove掉页面又比较复杂,那就很占用内存了!

(全文完)

文字链接:《addEventListener与removeEventListener实际应用

文章地址:http://www.qttc.net/201311382.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?