將事件處理程序應用於變量

Question

有沒有辦法將事件處理程序應用於變量，還是需要使用隱藏輸入等來完成？我有一個變量被設置：

var c = document.getElementById('myCanvas'); 
c.myVar = 17; 

而且我想建立一個事件處理程序，它在它都沒有改變的情況下，節約創建一個多餘的隱藏的輸入和改變，只是籠統地簡化我的代碼。

謝謝！

Answer 1

如果您想鉤住DOM元素屬性的更改，您可能需要查看DOM Mutation events。但感覺像是過度殺傷 - 我只是將所有對該屬性的訪問都包含在一個函數中，然後在該函數中調用我喜歡的任何內容。您只需確保始終使用該功能來訪問該屬性。

Answer 2

爲了說明你想要什麼，你可以定義的對象屬性的getter和setter與所需函數的調用：

HTML：

<canvas id="myCanvas" class="border"></canvas> 

的JavaScript：

var x = 0, 
    y = 0, 
    c = document.getElementById('myCanvas'), 
    ctx = c.getContext('2d'), 
    WIDTH = c.width, 
    HEIGHT = c.height, 
    paint = function() { 
     ctx.clearRect(0, 0, WIDTH, HEIGHT); 
     ctx.beginPath(); 
     ctx.rect(x, y, 6, 6); 
     ctx.closePath(); 
     ctx.fill(); 
    }; 

Object.defineProperty(c, 'x', { 
    get: function() { 
     return x; 
    }, 
    set: function (value) { 
     x = value; 
     paint(); 
    } 
}); 

Object.defineProperty(c, 'y', { 
    get: function() { 
     return y; 
    }, 
    set: function (value) { 
     y = value; 
     paint(); 
    } 
}); 

window.setInterval(function() { 
    var dx = Math.round(Math.random() * 6) - 3, 
     dy = Math.round(Math.random() * 6) - 3; 

    if (c.x + dx > 0 && c.x + dx < c.width) { 
     c.x += dx; 
    } 

    if (c.y + dy > 0 && c.y + dy < c.height) { 
     c.y += dy; 
    } 
}, 20); 

CSS ：

canvas.border { 
    border-style: solid; 
    border-color: 0; 
} 

FIDDLE

注意：上述解決方案用於說明回答具體問題的一點。它不能很好地解決對自繪對象的渴望。這是因爲我從兩個地方調用油漆（每當x或y改變時）。如果你總是改變x和y，你會做兩次繪畫。更好的方法是改變x，改變y和任何其他需要的狀態改變，然後調用對象上的paint方法使其自己繪製。

這對於說明這種類型的模型存在的問題做得很好，因此它在展示這種方式進行工作時可能陷入的缺陷方面具有價值。因此，我已經將該代碼保留在本說明中。

我已經做了一個新版本，顯示了我認爲是在下面的代碼中執行此操作的更好方法。只有JavaScript的改變：

的JavaScript：

function DrunkBox(x, y) { 
    'use strict'; 

    var c = document.getElementById('myCanvas'), 
     ctx = c.getContext('2d'); 

    this.width = c.width; 
    this.height = c.height; 

    this.x = x, 
    this.y = y; 

    this.paint = function() { 
     ctx.clearRect(0, 0, this.width, this.height); 
     ctx.beginPath(); 
     ctx.rect(this.x, this.y, 6, 6); 
     ctx.closePath(); 
     ctx.fill(); 
    }; 
} 

var db = new DrunkBox(50, 30); 

window.setInterval(function() { 
    var dx = Math.round(Math.random() * 6) - 3, 
     dy = Math.round(Math.random() * 6) - 3; 

    if (db.x + dx > 0 && db.x + dx < db.width) { 
     db.x += dx; 
    } 

    if (db.y + dy > 0 && db.y + dy < db.height) { 
     db.y += dy; 
    } 
    db.paint(); 
}, 20); 

FIDDLE