为链接添加addEventListener无效，请问代码问题出在哪里？

你的代码有两个关键问题导致链接触发事件监听器无法正常工作：

1. DOM未加载完成就执行脚本 #

你的脚本放在<head>标签内，浏览器是从上到下解析HTML的，当这段脚本运行时，<body>里的<a id="test">元素还没被浏览器创建出来，document.getElementById("test")会返回null，调用null.addEventListener()自然会直接失败。

2. 语法错误 #

代码里的事件回调函数定义存在语法错误：

document.getElementById("test").addEventListener('click', function(event)){
// 这里多写了一个闭合括号 ---------------------^

这个多余的括号会直接导致JavaScript解析失败，整个脚本都会终止执行。

修复后的代码方案 #

方案一：将脚本移到</body>前 #

这种方式能确保DOM元素已经被加载完成，脚本可以正常获取到目标元素：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 
<body> 
<a id="test" class="button" href="#">Test</a><br>

<script type="text/javascript">
  document.getElementById("test").addEventListener('click', function(event) {
    alert('test');
    // 如果不想让链接点击后跳转到页面顶部，可以添加下面一行阻止默认行为
    // event.preventDefault();
  });
</script>
</body> 
</html>

方案二：监听DOMContentLoaded事件（脚本保留在<head>里） #

通过监听DOM加载完成的事件，确保脚本在元素存在后再执行：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("test").addEventListener('click', function(event) {
      alert('test');
    });
  });
</script>
</head> 
<body> 
<a id="test" class="button" href="#">Test</a><br>
</body> 
</html>

内容的提问来源于stack exchange，提问作者Jan Jansen van Rensburg