javascript - 混合 CSS 和 Javascript 事件处理程序

Question

我希望能够将相同的事件处理程序分配给多个不同的 div 元素。每个元素都将具有独特的风格。

我像这样注册了事件处理程序:

<script type="text/javascript">

function add_something() {
    document.getElementById('manipulate').onclick = do_something; 
}

function do_something(e) { 
this.style.property = value;
}

window.onLoad = add_something;
</script>

所以我可以像这样为元素分配一个事件处理程序:

<div id="manipulate"></div>

问题是我想将该处理程序分配给多个元素，每个元素都具有独特的样式，并且我想使用 CSS 来完成它。但我不知道该怎么做。

最终，我想要这样的东西:

 <style>
 #element1{...}
 #element1{...}
 #element1{...}
 </style>

.....

<div id="element1" class="manipulate"></div>
<div id="element2" class="manipulate"></div>
<div id="element3" class="manipulate"></div>

这可能吗？谢谢

Answer 1

事件委托(delegate)？

HTML:

<div id="wrap">
    <div id="element1" class="manipulate">First element</div>
    <div id="element2" class="manipulate">Second element</div>
    <div id="element3" class="manipulate">Third element</div>
</div>

JavaScript:

var wrap = document.getElementById('wrap');

wrap.onclick = function (e) {
    var elem = e.target;

    elem.style.color = 'red';
};

现场演示: http://jsfiddle.net/VLcPw/