javascript - 鼠标悬停时附加事件监听器

Question

我对 Javascript 非常陌生，正在尝试将匿名函数附加到事件监听器。该函数的作用是，当鼠标悬停第一个元素时，根据第一个元素内文本的长度，将在第二个元素中显示一条消息。

但是，当我将鼠标悬停在第一个元素上时，没有任何反应。因为我是 JavaScript 新手，所以我不确定我做错了什么。

    function checkLength(event, minLength){
        var el, elementTwo;
        el = event.target;
        elementTwo = el.nextSibling;
        
        if(el.value.length < minLength){
            elementTwo.innerHTML = "not enough";
        } else {
            elementTwo.innerHTML = "enough";
        }
    }
    
    var elUserName = document.getElementById("one");
    elUserName.addEventListener("mouseover", function(event){
        checkLength(event, 5);
    }, false);

    <div>
        <div id="one">Bob</div>
        <div id="two"></div>
    </div>

Answer 1

要访问元素的文本，请使用textContent。 value 用于输入。

此外，您需要选择下一个同级元素，而不仅仅是下一个同级节点。

function checkLength(event, minLength){
        var el, elementTwo;
        el = event.target;
        elementTwo = el.nextElementSibling;
        
        if(el.textContent.length < minLength){
            elementTwo.innerHTML = "not enough";
        } else {
            elementTwo.innerHTML = "enough";
        }
    }
    
    var elUserName = document.getElementById("one");
    elUserName.addEventListener("mouseover", function(event){
        checkLength(event, 5);
    }, false);

<div>
        <div id="one">Bob</div>
        <div id="two"></div>
    </div>