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

Question

How do you grab the element you are currently hovering over using pure Javascript, no 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();
    };

}());

The problem is that it only changes the color on one of the elements, but not the other 2 when hovering over.

Solution thanks to 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 only returns the first index of the array of elements you would get back from that method.

To get all li , use querySelectorAll("li") and loop through the elements node list (array like) to add eventListeners to them.

Answer 2

I don't use jquery. This function returns the element that triggered the event.

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

Does that help? e is the event object, the event.srcElement is for internet explorer compatibility.