如何抓住你正在盘旋的元素？

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。

Answer 2

我不使用jquery。此函数返回触发事件的元素。

function eventTarget(e) {
    return (e && e.target ? e.target : event.srcElement);
}

这有帮助吗？ e是事件对象，event.srcElement用于兼容Internet Explorer。