javascript - 如何捕获你悬停的元素？

Question

如何使用纯 Javascript(不使用 jQuery)获取当前鼠标悬停的元素？

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

JavaScript

(function() {

    var item = document.querySelector('li');

    function randomColor() {
        return '#' + Math.random().toString(16).slice(2, 8);
    }

    item.onmouseover = function() {
        this.style.backgroundColor = randomColor();
    };

    item.onmouseleave = function() {
        this.style.backgroundColor = randomColor();
    };

}());

问题是它只改变了其中一个元素的颜色，而在悬停时不会改变另外两个元素的颜色。

感谢 RUJordan 的解决方案

(function() {

    var box = document.querySelectorAll('li');

    function randomColor() {
        return '#' + Math.random().toString(16).slice(2, 8);
    }

    for (var i = 0; i <= box.length; i++) {

        box[i].onmouseover = function() {
            this.style.backgroundColor = randomColor();
        };  

        box[i].onmouseleave = function() {
            this.style.backgroundColor = randomColor();
        };

    }

}());

Answer 1

querySelector 仅返回您将从该方法返回的元素数组的第一个索引。

要获取所有 li，请使用 querySelectorAll("li") 并遍历元素节点列表(类似数组)以添加 eventListeners给他们。