javascript - jQueryマウスオーバーDOM

Question

私にはいくつかの要素があります（その総数はわかりません）。これらの要素のいずれかをマウスオーバーしたときに何かが表示されるようにします（これらの要素mouseoverの共有クラスにバインドすることで処理されます）。

ただし、表示したいmouseoverものはカーソルが何にあるかによって異なります。そのためmouseover、コード内の各要素にイベントをバインドできるという贅沢をせずに、カーソルの下にDOM要素を取得する必要があります。

助言がありますか？

Answer 1

イベントの代表団はここであなたの友達です。

そのトピックに関するChristianHeilmannのこの投稿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任意のロジックを実装できます。