[英]Using addEventListener on Prototype
i am trying to runt the results of Prototype via a click through addEventListener but the results are showing even without clicking. 我试图通过单击addEventListener来破坏原型的结果,但是即使没有单击也显示结果。
<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>
You have to pass a function reference to addEventListener
, instead of calling the function (and passing its return value) as you're doing: 您必须将函数引用传递给
addEventListener
,而不是在执行时调用该函数(并传递其返回值):
Handle.addEventListener("click", Drink.Dispatch, false);
When you do that, your handler will only be fired on click. 当您这样做时,您的处理程序只会在点击时被解雇。 But you will face a different problem:
this
inside the handler will be the clicked element, not your Machine
instance. 但是,你将面临不同的问题:
this
处理程序内将是点击的元素,而不是你Machine
的实例。 To solve that, you can use Function.bind
(see the linked docs for a polyfill for older browsers): 为了解决这个问题,您可以使用
Function.bind
(有关旧浏览器的polyfill,请参阅链接的文档):
var drink = new Machine("coke",80);
var handle = document.getElementById('myBtn');
handle.addEventListener("click", drink.Dispatch.bind(drink), false);
Note: It's common practice to only use uppercase initials for constructor function names, so you can tell them apart on a quick glance. 注意:通常的做法是仅对构造函数名称使用大写字母缩写,因此您可以快速区分它们。 That's why I renamed
Drink
and Handle
to drink
and handle
. 这就是为什么我改名
Drink
和Handle
,以drink
和handle
。
You need to add your call between a function() {} closure for your listener. 您需要在监听器的function(){}闭包之间添加调用。 Or remove the () after your function name.
或删除函数名称后的()。
This should work: http://jsfiddle.net/9trqK/1/ 这应该工作: http : //jsfiddle.net/9trqK/1/
function Machine(n, p) {
this.name = n;
this.price = p;
}
var handle = document.getElementById('myBtn');
Machine.prototype.Dispatch = function () {
var container = document.getElementById('box');
container.innerHTML = this.name + " " + this.price;
}
var Drink = new Machine("coke", 80);
handle.addEventListener("click", function() { Drink.Dispatch() }, false);
To do custom events on object I use this simple script to extend my objects: 为了对对象执行自定义事件,我使用以下简单脚本来扩展对象:
/* Simple Custom event prototype for objects
Extend your object like this:
<OBJECT>.prototype = new EventEmitter;
Then you can use :
<OBJECT>.on("test",function() { alert("Test event triggered"); })
<OBJECT>.on("test",function() { alert("Test event 2 triggered"); })
<OBJECT>.trigger("test");
*/
function EventEmitter() {
var listeners = Object(); //Matrix of event/callbacks
//Add listener
this.on = function(evt, callback) {
//console.log("Listener added: " + evt);
if (!listeners.hasOwnProperty(evt))
listeners[evt] = Array();
listeners[evt].push(callback);
}
//Call listeners
this.trigger = function(evt, params) {
//console.log("trigger called " + evt);
//console.dir(listeners);
if (evt in listeners) {
callbacks = listeners[evt];
//Call all callbacks with the params
for (var x in callbacks){
callbacks[x](params);
}
} else {
console.log("No listeners found for " + evt);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.