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

Question

Edit: I need to mention that I do not want to use jQuery.
This is my code. I need to access the element which triggered the event such that I don't have to make two different functions for each html element.

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

function turnWhite(e){  
}

I need maybe something like this. Don't know if it's possible though.

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

Is this possible?

possible duplicate of [Getting the ID of the element that fired an event using jQuery](http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery) — Marc B, Mar 08 '13 at 21:10

score 4 · Accepted Answer · answered Mar 08 '13 at 21:12

4

According to javascripter.net

e.srcElement in Internet Explorer
e.target in most other browsers.

answered Mar 08 '13 at 21:12

Barmar

741,623
53
500
612

I didn't, either. Luckily, Google "javascript event target" knows about it. – Barmar Mar 08 '13 at 21:22

score 1 · Answer 2 · answered Mar 08 '13 at 21:23

If you wanted to apply the same event function to a set of elements, you could try something like this:

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

Demo: http://jsfiddle.net/louisbros/rt24U/

score 0 · Answer 3 · answered Mar 08 '13 at 21:12

0

You should be able to use e.target or e.currentTarget. However, behavior seems to be different per browser... Best to use a library like jquery or yui. Here is some documentation.

answered Mar 08 '13 at 21:12

Lucas

14,227
9
74
124

score 0 · Answer 4 · edited May 23 '17 at 12:04

Here is the JSFiddle so you can play with it: 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);
    }
})();

Create a self-invoking function that then gets the elements by a class name. The reason for this is because you don't really want to have more than one element with the ID anyway. Getting the class name will generate an Array of items that have that class. Then you can iterate over the new array and assign the event to each one of them.

Then we're getting each individual element with "this" instead of the actual event.

For reference: How to get current element in getElementsByClassName

score 0 · Answer 5 · answered Jan 29 '14 at 04:06

You could also go with this non-standard cross-browser hack:

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

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

Useful if you want to avoid passing parrams.

Demo: http://codepen.io/mrmoje/pen/avbEm

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

5 Answers5