CODEWITHSUNDEEP
javascriptdom-events
Vlad Otrocol
Vlad Otrocol

Reputation: 3190

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

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?

Upvotes: 0

Views: 1894

Answers (5)

mrmoje
mrmoje

Reputation: 3732

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

Upvotes: 0

Matt Wagner
Matt Wagner

Reputation: 45

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

Upvotes: 0

louisbros
louisbros

Reputation: 875

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/

Upvotes: 1

Lucas
Lucas

Reputation: 14969

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.

Upvotes: 0

Barmar
Barmar

Reputation: 781761

According to javascripter.net

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

Upvotes: 4

Related Questions