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这样的库。 Here is some documentation

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”而不是实际事件来获取每个元素。

供参考： How to get current element in 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

我可以在javascript中的事件触发器函数中获取html元素吗？

5 个答案: