在我的页面上,当鼠标悬停时,我想突出显示很多部分。这可以使用onmouseoveronmouseout完成。虽然我有100多个部分,但我认为在每个部分上调用方法不是非常有效。像这样

<li id="1" onmouseover="h(1)" onmouseout="h(1)">
    <label>1</label>
</li>
<li id="2" onmouseover="h(2)" onmouseout="h(2)">
    <label>2</label>
</li>
<li id="3" onmouseover="h(3)" onmouseout="h(3)">
    do something
</li>
...
<li id="4" onmouseover="h(4)" onmouseout="h(4)">
    do something
</li>

我不希望使用jQuery,因此希望以Java语言获得此答案。

最佳答案

您需要的是事件委托(delegate)。那就是将事件处理程序绑定(bind)到一个共同的祖先。在您的情况下,可能是这样:

// assuming `ul` refers to the list element that contains those `li` elements
ul.onmouseover = function(event) {
    // some cross-browser handling (IE)
    event = event || window.event;
    var target = event.target || event.srcElement;

    // if the event was triggered on a `li` element
    if(target.nodeName === 'LI') {
        h(this.id);  // do the stuff
    }
};

DEMO

这仅是示例,您必须根据需要进行调整,例如如果li元素本身包含元素,则情况会有所不同。

如果您想了解有关事件处理的更多信息,建议阅读the great articles on quirksmode.org

就是说,jQuery会使此过程变得容易得多,这还因为它可以模拟IE中的mouseentermouseleave事件,它们更加有用,并且可以解决跨浏览器的问题。

例如:
$('#listId').on('mouseenter', 'li', function() {
    h(this.id);
});

$('#listId').on('mouseleave', 'li', function() {
    h(this.id);
});

如果您在事件处理和/或DOM操作方面做了大量工作,那么真的推荐使用jQuery。

09-30 13:37
查看更多