DOM 与window 的量子纠缠

在HTML 里面设定一个有id 的元素之后，在JavaScript 里面就可以直接存取到它：

<button id="btn">click me</button> 
<script> 
console.log(window.btn) // <button id="btn">click me</button> 
</script>

然后因为scope 的缘故，你直接用btn也可以，因为当前的scope 找不到就会往上找，一路找到window

例题：

假设你有一段程式码，有一个按钮以及一段script，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <button id="btn">click me</button>
  <script>
    // TODO: add click event listener to button
  </script>
</body>
</html>

现在请你尝试用「最短的程式码」，在<script>标签内实作出「点下按钮时会执行alert(1)」这个功能。

document.getElementById('btn')
	.addEventListener('click', () => { 
		alert(1) 
	})

btn.onclick=()=>alert(1)

不需要getElementById，也不需要querySelector，只要直接用跟id 同名的变数去拿，就可以拿得到

PreviousSpring SpEL表达式注入 Next6.CSTI

Last updated 1 year ago