Javascript - EventListener 在外部 js 文件中不起作用答案

【问题标题】：Javascript - EventListener not working in external js-fileJavascript - EventListener 在外部 js 文件中不起作用
【发布时间】：2017-02-20 10:13:49
【问题描述】：

我正在尝试删除我的 html 中的 onClick 标记并将 EventListener 添加到我的外部 js 文件中，但似乎无法使其正常工作。

以下几行有效：

<input type="text" name="text" id="test">
<input type="submit" name="send" value="Skicka" id="klick" onclick="skriv()">

删除 onclick 并将以下内容添加到我的 javascript 时，它不会：

document.getElementById("klick").addEventListener("click", skriv);

function skriv() {

    var input = document.getElementById("test").value;
    alert("Hello" + " " + input);

}

整个html：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hello.css">
    <title>
        Multimedia
    </title>
    </head>
    <body>
        <script type="text/javascript" src="hello.js"></script>
        <div>
            <form>
                <p>Skriv ditt namn:</p><br>
                <input type="text" name="text" id="test">
                <input type="submit" name="send" value="Skicka" id="klick">
            </form>
            <p class="lol">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here`
            </p>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript inline event-listener

【解决方案1】：

你缺少 window.onload，结帐demo with separate script.js file

window.onload = function () {
  var buttonElement = document.getElementById("klick");
  var inputElement = document.getElementById('test');


  if (buttonElement) {
    buttonElement.addEventListener('click', skriv);
  }

  function skriv() {
    var input = inputElement.value;
    alert("Hello " + input);
  }
}

【讨论】：

是的，这行得通！谢谢维拉斯！很好的解决方案。我以php形式使用它来调用外部js文件。在我执行上述操作之前，事件侦听器将无法工作。

【解决方案2】：

将 <script> 标签放在结束 </body> 标签之前。
或者使用其他方式来检测您的 DOM 是否准备就绪。

<body>


  <div>
    <form>
      <p>Skriv ditt namn:</p><br>
      <input type="text" name="text" id="test">
      <input type="submit" name="send" value="Skicka" id="klick">
    </form>
    <p class="lol">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here`
    </p>
  </div>



  <script> // Or external JS URL
    document.getElementById("klick").addEventListener("click", skriv);

    function skriv() {

      var input = document.getElementById("test").value;
      alert("Hello" + " " + input);

    }
  </script>

</body>

【讨论】：

【解决方案3】：

它不起作用，因为在加载脚本时，找不到可以绑定事件的元素。

解决方案。

将您的脚本移动到正文标记的底部。

或者你可以使用委托

   document.addEventListener("click", function(e) {
       for (var target=e.target; target && target!=this; target=target.parentNode) {
       // loop parent nodes from the target to the delegation node
           if (target.matches(<selector>)) {
               handler.call(target, e);
               break;
           }
       }
   }, false);

【讨论】：

【解决方案4】：

我建议在结束标记之前添加以下内容：

<script> window.onload=startListen(); </script>

在 .js 文件的第一行，添加 function startListen(){ * }

您将 * 替换为您想要的所有事件监听器。

【讨论】：