JavaScript中addEventListener函数失效问题排查求助

你的代码里addEventListener无法正常工作的核心原因是：你直接调用了sub_event函数，而不是传递函数引用给事件监听器。

看这段代码：

sub.addEventListener("mouseover", sub_event("over"));
sub.addEventListener("mouseout", sub_event("out"))

页面加载时，sub_event("over")和sub_event("out")会立即执行，而非等待mouseover或mouseout事件触发时才执行。由于sub_event没有返回值，相当于给事件监听器绑定了undefined，自然无法响应事件。

修复方案 #

方案1：用匿名函数包裹调用 #

把事件监听器改为匿名函数，在函数内部调用sub_event：

sub.addEventListener("mouseover", function() {
  sub_event("over");
});
sub.addEventListener("mouseout", function() {
  sub_event("out");
});

方案2：让sub_event返回一个函数 #

修改sub_event，使其返回一个可作为事件处理函数的函数：

function sub_event(type) {
  return function() {
    switch (type) {
      case "over":
        sub.innerHTML = "Submit me!";
        break;
      case "out":
        sub.innerHTML = "Submit";
    }
  }
}

这样原有的addEventListener调用可以保持不变，因为sub_event("over")会返回一个函数，该函数会在事件触发时执行。

完整修复后的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>live site</title>

</head>

<body>
    <textarea name="" id="text_box" cols="30" rows="10" style="font-size: 2em;font-family: cursive;"></textarea>
    <div id="sub" style="background: #9e9eff;width: 135px;text-align: center;padding: 7px;border-radius: 7px;font-family: fangsong;font-size: 23px;">Submit</div>

</body>


<script>
    var sub = document.getElementById('sub');
    sub.onclick = fun;
    // 采用方案1的写法修复
    sub.addEventListener("mouseover", function() {
        sub_event("over");
    });
    sub.addEventListener("mouseout", function() {
        sub_event("out");
    });

    function fun() {
        let cor = document.getElementById('text_box');
        cor.value = cor.value.toLowerCase();
    }

    function sub_event(event) {
        switch (event) {
            case "over":
                sub.innerHTML = "Submit me!";
                break;
            case "out":
                sub.innerHTML = "Submit";
        }
    }
</script>

</html>

内容的提问来源于stack exchange，提问作者usloper