javascript - JavaScriptのイベントトリガー関数でhtml要素を取得できますか？

Question

編集：私はjQueryを使いたくないことを言及する必要があります。 これは私のコードです。イベントをトリガーした要素にアクセスして、html要素ごとに2つの異なる関数を作成する必要がないようにする必要があります。

document.getElementById("login").onmouseover = turnWhite;

function turnWhite(e){  
}

たぶんこんなものが必要です。それが可能かどうかはわかりませんが。

function turnWhite(e){
    e.HTMLEL.style.color = "white"; 
}

これは可能ですか？

score 3 · Accepted Answer

javascripter.netによると

InternetExplorerのe.srcElement
他のほとんどのブラウザのe.target。

score 1 · Accepted Answer

同じイベント関数を一連の要素に適用したい場合は、次のようにすることができます:

var buttons = document.getElementsByClassName("change");
for(var i = 0;i < buttons.length;i++){
    buttons[i].onmouseover = function(){
        this.style.color = "red"; 
    }
}

デモ: http://jsfiddle.net/louisbros/rt24U/

score 0 · Accepted Answer

e.targetまたはを使用できるはずですe.currentTarget。ただし、動作はブラウザごとに異なるようです...jqueryやyuiなどのライブラリを使用するのが最適です。ここにいくつかのドキュメントがあります。

score 0 · Accepted Answer

次の非標準のクロスブラウザーハックを使用することもできます。

document.getElementById("login").onmouseover = function () { turnWhite(); }

function turnWhite(){  
    var myEventElement = turnWhite.caller.arguments[0].target;
    //do something with myEventElement
}

パラメータの受け渡しを避けたい場合に便利です。

デモ: http://codepen.io/mrmoje/pen/avbEm

score 0 · Accepted Answer

ここに JSFiddle があるので、それで遊ぶことができます: http://jsfiddle.net/9nr4Y/

HTML:

<div class="login">Login</div>
<br />
<div class="login">Login 2</div>

JavaScript:

(function() {
    var elms = document.getElementsByClassName("login"),
        l = elms.length, i;
    for( i = 0; i < l; i++ ) {
        ( function( i ) {
            elms[i].onmouseover = function() {
                this.style.color = "#000000";
                this.style.background = "#FFFFFF";
            };
        })(i);

        ( function( i ) {
            elms[i].onmouseout = function() {
                this.style.color = "#FFFFFF";
                this.style.background = "#000000";
            }
        })(i);
    }
})();

クラス名で要素を取得する自己呼び出し関数を作成します。この理由は、とにかく ID を持つ複数の要素を持ちたくないからです。クラス名を取得すると、そのクラスを持つ項目の配列が生成されます。次に、新しい配列を反復処理して、イベントをそれぞれに割り当てることができます。

次に、実際のイベントの代わりに「this」を使用して個々の要素を取得します。

参考： getElementsByClassName で現在の要素を取得する方法

javascript - JavaScriptのイベントトリガー関数でhtml要素を取得できますか？

5 に答える 5

Related

Reference