鼠标悬停时附加事件侦听器

Question

我是 Javascript 的新手，正在尝试将匿名函数附加到事件侦听器。该函数的作用是，当 mouseover 第一个元素时，将根据第一个元素中文本的长度在第二个元素中显示一条消息。

但是，当我将鼠标悬停在第一个元素上时，没有任何反应。因为我是 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

要访问您使用的元素的 text textContent。 value 用于输入。

此外，您需要 select 下一个元素兄弟节点，而不仅仅是下一个兄弟节点。

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>

鼠标悬停时附加事件侦听器

Attached event listener on mouseover

html

javascript

events

mouseevent

dom-events