在Prototype上使用addEventListener

Question

我试图通过点击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>

http://jsfiddle.net/9trqK/

Answer 1

你必须通过一个函数引用来addEventListener的,而不是调用函数(并通过其返回值)为你做的,:

Handle.addEventListener("click", Drink.Dispatch, false);

当您这样做时,您的处理程序将仅在单击时触发.但是你将面临一个不同的问题:this处理程序内部将是被点击的元素,而不是你的Machine实例.要解决这个问题,您可以使用Function.bind(请参阅旧版浏览器的polyfill的链接文档):

var drink = new Machine("coke",80);
var handle = document.getElementById('myBtn');
handle.addEventListener("click", drink.Dispatch.bind(drink), false);

注意:通常的做法是仅对构造函数名称使用大写首字母,因此您可以快速浏览它们.这就是为什么我改名Drink,并Handle以drink和handle.