我可以在JavaScript的事件触发函数中获得html元素吗?

Can I get the html element in an event trigger function in JavaScript?

本文关键字：html 元素 函数 JavaScript 事件 我可以      更新时间：2023-09-26

编辑:我需要提到我不想使用jQuery。
这是我的代码。我需要访问触发事件的元素，这样我就不必为每个html元素创建两个不同的函数。

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

我可能需要这样的东西。我不知道这是否可能。

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

这可能吗?

根据javascripter.net

  • e。Internet Explorer
    • 中的srcElement
  • e。

如果您想将相同的事件函数应用于一组元素，您可以尝试这样做:

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/

您应该能够使用e.target或e.currentTarget。然而，每个浏览器的行为似乎是不同的……最好使用jquery或yui之类的库。这里有一些文档

这是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的元素。获取类名将生成一个包含该类的项的Array。然后，您可以遍历新数组并将事件分配给每个数组。

然后我们用"this"代替实际的事件来获取每个单独的元素。

供参考:如何在getElementsByClassName

中获取当前元素

你也可以使用这个非标准的跨浏览器hack:

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

相关文章：