javascript - jQuery 鼠标悬停 DOM

Question

我有许多元素（我不知道总数）。当我将鼠标悬停在这些元素中的任何一个上时，我希望出现一些东西（通过mouseover绑定到这些元素的共享类来处理）。

但是，我想要出现的东西mouseover取决于光标所在的位置 - 所以我需要获取光标下的 DOM 元素，而不需要能够将mouseover事件绑定到代码中的每个元素。

有什么建议么？

Answer 1

事件委托在这里是你的朋友。

请参阅 Christian Heilmann 关于该主题的这篇文章http://www.icant.co.uk/sandbox/eventdelegation/。

HTH。

Answer 2

jQuery 使这很容易.each()：

$('#container').bind('mouseover', function () {
        $(".selector").each(function(){
                // Do something $(this) = item clicked
                $(this).toggleClass('.example'); // Toggle class is just an example
        });
});

然后，您可以检查 $(this) 的某些特征，然后根据值/特征做不同的事情。

Answer 3

HTML：

<a id="say1" class="say" href="#" data-word="one">Say 'one'</a>
<a id="say2" class="say" href="#" data-word="two">Say 'two'</a>
<a id="say3" class="say" href="#" data-word="three">Say 'three'</a>

Javascript（使用 jQuery）：

$(document).ready(function () {
  $('.say').mouseover(function () {
    alert($(this).data('word'));
  });
});

纯 Javascript（没有 jQuery，它是不等价的）：

window.onload = function () {
  var onmouseover = function (e) {
    alert(e.target.getAttribute('data-word'));
  };

  var elems = document.getElementsByClassName('say');   

  for (var i = 0; i < elems.length; i += 1) {
    elems[i].onmouseover = onmouseover;
  }
};

alert您可以实现任何逻辑，而不是调用函数。