CODEWITHSUNDEEP
javascripthtml
smaili
smaili

Reputation: 1235

How to get event target without jQuery

I have been trying to get the target (<li> element) from the mouseenter event but so far no luck!

The code:

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    var ul = document.getElementById('ul');

    ul.onmouseenter = function(e) {
        console.log(e.target);
    };
</script>

Unfortunately the console keeps printing the <ul /> element. Any suggestions?

Upvotes: 3

Views: 2281

Answers (2)

Vikash Pathak
Vikash Pathak

Reputation: 3572

You can get the targeted li like:

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('ul');
ul.onclick= function(event) {
    var target = getEventTarget(event);
    console.log(target.innerHTML);
};

Upvotes: 1

user2736012
user2736012

Reputation: 3543

It's because the onmouseenter event is not a "bubbling" event, so it only fires when you enter the UL element, not when you enter nested elements, like the LI elements.

Therefore the e.target and the this elements will both be the UL.

If you use onmouseover instead it'll bubble, so you'll get the LI as the e.target when entering the LI elements.

Upvotes: 6

Related Questions