使用JavaScript的事件代表

我有一個div列表，我想添加「onmouseover」事件。我嘗試遍歷元素的列表，並重新定義「的onmouseover」功能是這樣的：使用JavaScript的事件代表

for (var i=0; i<3; i++) { 
    elements[i].onmouseover = function() { alert('FOO') }; 
}

不幸的是，網頁加載完成後，它看起來像這樣只被應用到最後一個元素。我敢肯定，這是一個真正的新手問題，但我還沒有想通了......

這裏有一個更好的例子展示我的問題：http://jsfiddle.net/qajPM/你可以做

來源

2012-01-22 user313724

你的任務是缺乏}在最後。 – alexn

嘗試使用'jquery'，它會幫助你很多。 – Vyktor

謝謝alexn，修復。 – user313724

的問題是，你正在創建所有的div元素是這樣的：

parent.innerHTML += "<div> " + i + "</div>"

正如我敢肯定，你知道這是相當於parent.innerHTML = parent.innerHTML + ...，但.innerHTML屬性返回的HTML作爲一個字符串（沒有任何相關的事件處理程序），所以每次你用一個新字符串覆蓋整個parent div的innerHTML時，這意味着你正在有效地添加到文本內容，但是破壞了你已經設置的mouseover處理程序。

嘗試，而不是像這樣：

var el = document.createElement("div"); 
el.innerHTML = i; 
parent.appendChild(el);

其中追加了新的元素，而不會影響那些已經存在。

更新演示：http://jsfiddle.net/qajPM/1/

來源

2012-01-22 01:17:00 nnnnnn

太棒了，謝謝 – user313724

的一件事是，而不是分配的事件處理程序到每個div，您可以將一個處理程序分配給父項，然後根據事件目標簡單獲取哪個div被挖掉。

HTML：

<div id="parent"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div>

的Javascript：

document.getElementById('parent').onmouseover = function(e) { 
    var target = e.target || e.currentTarget; 
    alert('Target ' + target.innerHTML + ' was moused over'); 
};

小提琴：http://jsfiddle.net/ZhpLA/

正如其他人所指出的jQuery也使得這款有略少的代碼（不過，如果這是你所需要的它會是毫無意義的）：

$('#parent').on('mouseover', 'div', function(e) { 
    alert('Target ' + e.currentTarget.innerHTML + ' was moused over'); 
});

上述jQuery代碼的優點是，它將適用於當前和未來孩子div s的#parent。如果您以編程方式添加更多mouseover事件，它們也將繼續工作。

來源

2012-01-22 00:14:16

jquery很棒，但我不能證明導入庫只是爲了解決這個問題。 – user313724

當然，這就是爲什麼小提琴是純粹的'ol JavaScript。;） –

如果所有div都具有相同的父項，這將工作。現在情況並非如此，並不一定是我想要添加的限制。 – user313724

使用JavaScript的事件代表

回答

相關問題