我可以在javascript中的事件觸發函數中獲取html元素嗎？

Question

編輯：我需要提及的是，我不想使用jQuery。 這是我的代碼。 我需要訪問觸發事件的元素，這樣我就不必為每個html元素制作兩個不同的函數。

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

function turnWhite(e){  
}

我可能需要這樣的東西。 不過不知道是否有可能。

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

這可能嗎？

Answer 1

根據javascripter.net

• Internet Explorer中的e.srcElement
• 在大多數其他瀏覽器中的e.target。

Answer 2

如果要將相同的事件函數應用於一組元素，則可以嘗試如下操作：

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/

Answer 3

您應該可以使用e.target或e.currentTarget 。 但是，每個瀏覽器的行為似乎有所不同...最好使用jquery或yui之類的庫。 這是一些文檔 。

Answer 4

這是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中獲取當前元素

Answer 5

您還可以使用這種非標准的跨瀏覽器黑客：

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

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

如果您想避免通過parrams，則很有用。

演示： http ： //codepen.io/mrmoje/pen/avbEm