將鼠標事件綁定到JavaScript對象

有什麼方法可以將鼠標事件（如「mouseover」）綁定到JavaScript對象嗎？將鼠標事件綁定到JavaScript對象

function test(x,y,z){ 
    this.x = x; 
    this.y = y; 
    this.z = z; 
    this.add = function(){ 
     $('body').append("<div id='"+this.z+"'>test: x:"+this.x" y:"+this.y"</div>"); 
    } 
    return this.add(); 
} 

t1 = new test(1,2,3); 
t2 = new test(2,3,4);

在我的代碼我有以下結構定義的類/對象，是否有任何方式的事件偵聽器附加到在所附的div，但能夠訪問對象屬性。

來源

2011-11-23 Jono Brogan

你可以做到這一點，你加入它的身體後，所以你this.add函數中，你可以綁定你的事件：

$("#"+this.z).mouseover(function(){ 
    // Function 
});

但你知道的ID不能以正確的數量開始？

如果您想使用this.z，請執行此操作。我使用的是div[0]，因爲所有jQuery對象都是數組，所以第0個元素是我剛剛創建的元素。

function test(x,y,z){ 
    var div = $("<div id='"+this.z+"'>test: x:"+this.x+" y:"+this.y+"</div>").appendTo("body"); 
    div[0].y = y; 
    div[0].x = x; 
    div[0].z = z; 
    div.mouseover(function(){ 
     alert(this.x); 
    }); 

    return div; 
} 

t1 = new test(1,2,3); 
t2 = new test(2,3,4);

來源

2011-11-23 19:20:49 Niels

乾杯的答覆，但我已經試過這個，並從這個函數內，即'$（「＃」+ this.z）.mouseover（function（）{alert（this.x）}）;'我無法訪問對象的屬性，例如this.x/this.y 和關於ID的我不好，我只是輸入隨機文本。 –

這是因爲你創建的'div'是新元素，更新了我的帖子。 – Niels

請避免添加元素到頁面的DOM通過JavaScript使用 HTML。

HTML適用於內容，因爲JavaScript適用於行爲。重要的規則是一個很好的代碼。

只需創建您的DIV元素（它將是一個普通的對象）並執行任何您想要的，從追加到添加事件偵聽器。

var div = document.createElement('div'); 

div.setAttribute('id', 'foobar'); 
div.textContent = 'lol'; 

div.addEventListener('mouseover', myEventCallback, false); 

document.body.appendChild(div);

通過使用一個體面的JavaScript lib中，你可以在上面減少兩行乾淨的代碼。

來源

2011-11-23 19:31:40 emyller

將鼠標事件綁定到JavaScript對象

回答

相關問題