javascript - 对js绑定事件与移除事件有些不理解，求指点!(内有代码)
本文介绍了javascript - 对js绑定事件与移除事件有些不理解，求指点!(内有代码)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title>qqq</title>
<meta charset="utf-8"/>
</head>
<body>
<button>点击</button>
<script type = "text/javascript">
function Monkey(options){
this.dom = options.dom
}
Monkey.prototype.entry = function(){
this.dom.addEventListener('click',this.logic.bind(this),false);
}
Monkey.prototype.logic = function(){
this.dom.removeEventListener('click',this.logic);
console.log('ppp');
}
var btn = document.querySelector('button');
var monkey = new Monkey({
dom:btn
});
monkey.entry();
</script>
</body>
</html>所有的代码都在这。我想要实现的是打印一次'ppp'。事实却是打印多次'ppp'。
解决方案
点一下打印一次ppp，没毛病啊~
另外提醒你，你这样是移除不掉事件的。
原生js移除事件需要将绑定事件时候的函数传入才能移除，bind是返回一个新的函数，并不是this.logic，所以根本移除不掉，每次点都会打印一次ppp，你可以自己在logic里面打断点调试：
代码给你改了一下，点一次过后解除事件绑定，只会打印一次了。
<!DOCTYPE html>
<html>
<head>
<title>qqq</title>
<meta charset="utf-8" />
</head>
<body>
<button>点击</button>
<script type="text/javascript">
var f;
function Monkey(options) {
this.dom = options.dom
}
Monkey.prototype.entry = function() {
f = this.logic.bind(this);
this.dom.addEventListener('click', f, false);
}
Monkey.prototype.logic = function() {
this.dom.removeEventListener('click', f);
console.log('ppp');
}
var btn = document.querySelector('button');
var monkey = new Monkey({
dom: btn
});
monkey.entry();
</script>
</body>
</html>
这篇关于javascript - 对js绑定事件与移除事件有些不理解，求指点!(内有代码)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
