- 行内方式绑定(元素属性)
<body>
<input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>
<body>
<input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
function f(){
console.log(3);
}
</script>
onclick 其实就是html元素的一个
属性，而属性的值需要是
一段可执行的JS代码- 动态绑定 (节点对象属性)
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(4);
}
</script>
获取节点对象，然后
修改 节点对象的
属性 onclick
的值，值是一个
匿名函数即可；
以上两种事件绑定方式，需要在事件名称前加 on ;
- 事件监听(节点对象方法)
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(5);
});
</script>
每一个节点对象都提供了
addEventListener
，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
![js 异步执行_JS异步执行机制——事件循环（Event Loop）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)