我试图通过点击addEventListener
来运行Prototype的结果,但即使没有点击,结果也会显示出来。
<div id="box">Your Item:</div>
<button id="myBtn">Buy</button>
<script type="text/javascript">
function Machine(n,p){
this.name = n;
this.price = p;
}
Machine.prototype.Dispatch = function(){
var container = document.getElementById('box');
container.innerHTML = this.name + " " + this.price;
}
var Drink = new Machine("coke",80);
var Handle = document.getElementById('myBtn');
Handle.addEventListener("click",Drink.Dispatch(),false);
</script>
3条答案
按热度按时间wn9m85ua1#
你必须向
addEventListener
传递一个函数 reference,而不是像你这样调用函数(并传递其返回值):当你这样做时,你的处理程序只会在点击时被触发。但是你将面临一个不同的问题:处理程序中的
this
将是被点击的元素,而不是你的Machine
示例。要解决这个问题,你可以使用Function.bind
(请参阅链接文档了解旧浏览器的polyfill):注意:通常的做法是只使用大写字母作为构造函数的名字,这样你就可以快速地分辨它们。这就是为什么我将
Drink
和Handle
重命名为drink
和handle
。bybem2ql2#
你需要为你的监听器添加一个function(){}闭包之间的调用。或者删除函数名后面的()。
这应该可以工作:http://jsfiddle.net/9trqK/1/
of1yzvn43#
为了在对象上执行自定义事件,我使用这个简单的脚本来扩展我的对象: