3

在我的页面上，我想在鼠标经过时突出显示许多部分。这可以使用onmouseover和来完成onmouseout。虽然我有 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>

我希望在 Javascript 中得到这个答案，因为我不知道 jQuery。

4

5 回答 5

6

你所追求的是事件委托。那就是将事件处理程序绑定到一个共同的祖先。在你的情况下，它可能是这样的：

// 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
    }
};

演示

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

如果您想了解有关事件处理的更多信息，我建议您阅读quirksmode.org 上的精彩文章。

也就是说，jQuery会让这变得更容易，还因为它模拟了IE 中的事件mouseenter和mouseleave事件，这更有用，并且处理了跨浏览器问题。

例如：

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

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

如果您经常使用事件处理和/或 DOM 操作，那么 jQuery 确实值得推荐。

于 2012-05-09T22:33:17.080 回答
1 
<li id="1" class="btn">
do something
</li>

js：

<script type="text/javascript">
    window.onload = function(){
       var allBtns = document.getElementsByClassName("btn");
       for (var i = 0; i < allBtns.length; i++) {
         allBtns[i].onmouseover = function(){h(this.id)};
         allBtns[i].onmouseout = function(){h(this.id)};
        }
     }
</script>

或者：

<ul class="myBTNS">
   <li id="1">do something</li>
   <li id="2">do something</li>
<ul>

js：

<script type="text/javascript">
    window.onload = function() {
        var btnsContainer = document.getElementsByClassName("myBTNS");
        for (var i = 0; i < btnsContainer.length; i++) {
            var allBtns = btnsContainer[i].getElementsByTagName("li");
            for (var i = 0; i < allBtns.length; i++) {
                allBtns[i].onmouseover = function() {h(this.id)};
                allBtns[i].onmouseout = function() {h(this.id)};
            }
        }
    }
</script>

​</p>

于 2012-05-09T22:38:18.137 回答
1

非常简单的解决方案：

HTML：<li>对于一旦鼠标移到/移出您想要执行操作的 每个元素，分配一个类值。在此示例中，我使用了类名“ someclass”，但是您可以将其更改为您认为最适合它的任何名称。另请注意，一个元素可以有多个类。例如<li class="someclass anotherclass"></li>。

<ul>
  <li class="someclass secondaryclass">Example</li>
  <li class="someclass">Example</li>
  <li class="someclass">Example</li>
  <li class="someclass">Example</li>
<ul>​

JavaScript： 遍历类名为“someclass”的所有元素，并附加事件侦听器。在这个例子中，我已经减轻了 ' out' 和 ' over' 函数声明，但是请查看下面的 jsFiddle 示例以了解它们的实际作用。

for(var i in document.getElementsByClassName('someclass'))
{
    document.getElementsByClassName('someclass')[i].addEventListener('mouseover', over ,false);
    document.getElementsByClassName('someclass')[i].addEventListener('mouseout', out ,false);   
}

http://jsfiddle.net/eVs9L/ <--查看浏览器控制台查看鼠标悬停/out函数输出的输出。

jQuery方法：

$('.someclass').hover(function(){
  //Mouse Over Code goes here...
}, function(){
  //Mouse Out code goes here...
});
于 2012-05-09T22:42:47.950 回答
0

是的，答案是使用 jQuery .each。

链接：http ://api.jquery.com/each/

于 2012-05-09T22:32:51.593 回答
0

您可以使用 document.getElementsByTagName 来获取所有 li 元素并将它们存储在一个数组中。然后只需遍历数组并将函数分配给 onmouseover 和 onmouseout 事件即可。

var elems = document.getElementsByTagName('li');
for (var i = 0; i < elems.length; i++) {
    elems[i].onmouseover = function () {
        this.innerHTML = "over";
        this.style.background = "yellow";
    };
    elems[i].onmouseout = function () {
        this.innerHTML = "out";
        this.style.background =  "white";
    };
}

这是 jsFiddle 中演示的链接。我让函数更改文本和背景颜色只是为了演示代码实际上在做什么。

于 2012-05-09T22:49:58.280 回答