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?

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?

• javascript
• html

2 Answers 2

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.

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);
};