javascript - 我可以在 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.targetor 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
}

如果您想避免传递参数，这很有用。

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