JavaScript中事件绑定局部函数

最新推荐文章于 2024-06-08 23:16:41 发布

karaschee

最新推荐文章于 2024-06-08 23:16:41 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： JavaScript C C++ C# XHTML ViewUI

本文链接：https://blog.csdn.net/karaschee/article/details/83703428

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		alert(t1);
	}
}
</script>

多次点击bind by a或bind by b之后，再点击id为button的input，会出现多个alert窗口。

因为每次执行func函数给bt绑定的函数b是不一样的，有自己的域
如果把函数b移到外面，作为全局函数，就只会弹出一个窗口。
注意：按标准来说，addEventListener多次绑定同一事件的同一函数，后面的绑定将覆盖前面的，虽然每次绑定的函数名字都是b，但是一定记住，他们是不同的函数，不存在后面的绑定将覆盖前面的情况


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		c();
	}
	function c(){
		alert(t1);
	}
}
</script>

以上代码执行结果不变。

因为每执行一次函数func，就会定义一个函数b和c，并且由于函数b作为事件绑定给了bt，所以函数b和c不会随函数的执行结束而消除（回收），仍然存在在内存中。
但是每次定义的函数b、c是不同的，所以存在多个同名却在不同域的函数b\c，这也是为什么会弹出多个alert框的原因。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<a href="javascript:func('用a绑定');">a</a>
<a href="javascript:func('用b绑定');">b</a>
<input id="button" type="button" value="click" />
</body>
</html>
<script type="text/javascript">
function func(t1){
	var bt = document.getElementById('button');
	bt.addEventListener('click',b,false);
	function b(){
		this.c();
	}
	bt.c = function(){
		alert(t1);
	}
}
</script>

以上代码执行结果：不断点击a\b，弹出多个alert框，但每个alert框只显示最后一次点击所传的t1值。

这里不同的是，c是作为bt的方法来绑定的，所以可以看作全局函数，只存在一个c函数。

karaschee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中事件绑定局部函数

[code="html"]abfunction func(t1){ var bt = document.getElementById('button'); bt.addEventListener('click',b,false); function b(){ alert(t1); }}[/code]多...
复制链接

扫一扫