javascript - 为什么点击按钮要放在函数之前才能执行？

Question

<script>
var x = document.getElementById("demo");
x.addEventListener("click", myFunction);

function myFunction() 
{
    alert ("Hello World!")
}


</script>

<button id="demo">点我</button>

Answer 1

因为html文档时从上往下执行的，按钮如果在script下面，var x = document.getElementById("demo");执行完了x是undefined，再执行x.addEventListener("click", myFunction);就报错了。

Answer 2

看到这个var x = document.getElementById("demo");没有
如果按钮在这个的后面就会导致x取不到这个对象了,所以就不能添加事件了;
总的来说这是因为代码是自上而下加载

Answer 3

并非是要放在函数之前，照你的写法，script标签优先于button标签解析，
你可以加一行代码在var x下面，console.log(x)，会返回一个null。
原因是js代码执行的时候button并未被浏览器解析到。你不能给给一个null
绑定事件监听。所以这也是为什么一般建议html里面把js引入放在页面最末尾的原因

Answer 4

js代码放到load里就不用管顺序了。

Answer 5

你可以去看看页面js加载相关知识。
如果button在js下面的话，document.getElementById("demo")拿不到demo元素，所以也没法注册事件。

Answer 6

因为js的变量提升
大概的声明顺序 是

function myFunction(){}
var x ;
x=document.getElementById("demo")

具体自行百度