![](/img/trans.png)
[英]using this keyword with javascript prototype addEventListener
[英]Using addEventListener on Prototype
我試圖通過單擊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>
您必須將函數引用傳遞給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
。
您需要在監聽器的function(){}閉包之間添加調用。 或刪除函數名稱后的()。
這應該工作: 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);
為了對對象執行自定義事件,我使用以下簡單腳本來擴展對象:
/* 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.