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>

jQueryがわからないので、Javascriptでこの回答を得たいと思っています。

4

5 に答える 5

6

あなたが求めているのはevent delegationです。これは、イベント ハンドラーを共通の祖先にバインドすることです。あなたの場合、それは次のようなものかもしれません：

// 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 のすばらしい記事を読むことをお勧めします。

とは言うものの、jQuerymouseenterを使用すると、IE のおよびイベントをシミュレートできるため、これがはるかに簡単になり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

非常に簡単な解決策：

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/ <-ブラウザコンソールを表示して、マウスオーバー/出力機能の出力を確認します。

jQueryアプローチ：

$('.someclass').hover(function(){
  //Mouse Over Code goes here...
}, function(){
  //Mouse Out code goes here...
});
于 2012-05-09T22:42:47.950 に答える
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 に答える
0

はい、答えはjQuery .eachを使用しています。

リンク: http://api.jquery.com/each/

于 2012-05-09T22:32:51.593 に答える
0

document.getElementsByTagName を使用して、すべての要素を取得し、それらを配列に格納できます。次に、配列をループして、関数を 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 に答える