javascript - 如何在没有 jQuery 的情况下获取事件目标

Question

我一直在尝试从mouseenter<li>事件中获取目标（元素），但到目前为止还没有运气！

编码：

<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>

不幸的是，控制台一直在打印<ul />元素。有什么建议么？

Answer 1

这是因为该onmouseenter事件不是“冒泡”事件，所以它只在您输入UL元素时触发，而不是在您输入嵌套元素时触发，例如LI元素。

因此e.target和this元素都将是UL。

如果你onmouseover改用它会冒泡，所以你会在输入元素时得到LIas 。e.targetLI

Answer 2

您可以获得目标 li，例如：

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