用匿名函数去包含一个事件响应函数

最新推荐文章于 2022-04-28 19:49:38 发布

sikies

最新推荐文章于 2022-04-28 19:49:38 发布

阅读量246

点赞数

分类专栏：前段学习文章标签：前段学习总结

本文链接：https://blog.csdn.net/qq_38277179/article/details/90679751

版权

前段学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1解决动态事件函数不能传参问题

转自，https://blog.csdn.net/q5706503/article/details/82989804，自己验证如下，

如想完成点击按钮后，窗口内弹出特定的内容，可以是其他节点对象的属性值。代码如下，

            var btn2 = document.getElementById("btn2");
            function alertStr (str) {
                alert(str);
                alert(this);
            }

            btn2.onclick = function () {
                alertStr("124");    
            };

结果为，

2解决1中匿名函数中事件函数中this指向不是被绑定对象。

alertStr函数中弹出this是window对象，这印证了https://blog.csdn.net/qq_38277179/article/details/90543510中第四章this的情况中（1）的情况，但是一帮情况下，我们希望事件处理函数中的this指向的都是被绑定事件的对象，也即上述代码中的input对象，

修改代码如下

var btn2 = document.getElementById("btn2");
			function alertStr (str) {
				alert(str);
				alert(this);
			}

			btn2.onclick = function () {
				alertStr.call(this, "124");	
			};

运行结果

应用：在为对象绑定多个事件中，解决attachEvent返回this不是被绑定对象的问题。

问题说明：attachEvent参数接受：参数1 被绑定参数的对象，参数2 事件字符串，参数3 事件响应函数；在事件响应函数中按照逻辑 alert(this) 时，应弹出参数1的对象，但是这种方式只能弹出window对象。

问答原因：之所以只能弹出window对象，无非是事件响应函数是仅仅作为一个函数执行了，没有放在参数1的作用域中。

问题解决：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件bind的测试</title>
	<script type="text/javascript">
		
		window.onload = function () {

			var btn1 = document.getElementById("btn1");
			bind(btn1,	"onclick", function () {
				alert(this);
			});
		}

// 封装函数，参数  绑定的对象obj,事件字符串eventStr,回调函数fun
// 默认传入的eventStr是带on的
		function bind(obj, eventStr, fun){
			// 需要解决的问题：
			// 1  浏览器对于addEventListener和attachEventListener的兼容性
			// 2  两个事件绑定函数返回的this不同
			// 3  addEventListener的eventStr不带on，而attachEventListener带on
			if (obj.addEventListener) { 
				eventStr = eventStr.replace("on", "");
				obj.addEventListener(eventStr, fun, false);
			} else {
				obj.attachEvent.call(obj, eventStr, function () {
					fun.call(obj);
				});
			}
		}

	</script>
</head>
<body>
	<input type="button" id="btn1" value="点我一下">
</body>
</html>

IE8下，运行结果如下，

sikies

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用匿名函数去包含一个事件响应函数

1解决动态事件函数不能传参问题转自，https://blog.csdn.net/q5706503/article/details/82989804，自己验证如下，如想完成点击按钮后，窗口内弹出特定的内容，可以是其他节点对象的属性值。代码如下， var btn2 = document.getElementById("btn2"); func...
复制链接

扫一扫

专栏目录