JavaScript-给对象绑定事件的三种方法

第一种直接将事件添加到元素上

<h1 onclick="console.log("hello")">hello</h1>

点击h1标题后在控制台显示一行文字hello。

第二种将事件直接作为属性添加到对象上

<h1>hello</h1>
<script>windows.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){console.log("hello");
}
}
</script>

和上面效果是一样的，推荐这么写

第三种是addEventListener() 方法

document.addEventListener() 方法用于向文档添加事件句柄

<p>该实例使用了 addEventListener() 方法向文档中添加点击事件。</p>
<p>尝试点击文档的任何地方。</p>
<p id="demo"></p>
<script>
document.addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World!";
});
</script>