Question

这段代码有什么问题？我在IE10和Firefox中测试了它，但没有引发click事件。

  <html>
  <head>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <style type="text/css" media="screen">
  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }
  </style>

  <script>
  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.firstChild.nodeValue = new_text;    
  }

  // Function to add event listener to table
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
  </script>

  </head>

  <body>
  <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
  </table>
  </body>
  </html>

Answer 1

在DOM准备就绪之前，您的JavaScript正在运行：

Uncaught TypeError: Cannot call method 'addEventListener' of null

在准备好之前，您无法与DOM进行可靠的交互，因此请将JavaScript移到正文的底部。

如果您考虑使用window.load = function() {...}，则在加载所有资源之前，附加到window.load的回调将无法运行，这可能不是你想要什么。 jQuery的$(document).ready()没有简单的JavaScript替代方法，但您可以使用此处的内容：$(document).ready equivalent without jQuery

Answer 2

使用

window.onload = function() {
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
}

为什么不提出点击事件？

2 个答案: