- 行內(nèi)方式綁定(元素屬性)
<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 其實(shí)就是html元素的一個(gè)屬性，而屬性的值需要是 一段可執(zhí)行的JS代碼
- 動(dòng)態(tài)綁定 (節(jié)點(diǎn)對(duì)象屬性)
<body>
<input type="button" value="按鈕" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(4);
}
</script>
獲取節(jié)點(diǎn)對(duì)象，然后 修改 節(jié)點(diǎn)對(duì)象 的 屬性 onclick 的值，值是一個(gè) 匿名函數(shù) 即可；
以上兩種事件綁定方式，需要在事件名稱前加 on ;
- 事件監(jiān)聽(節(jié)點(diǎn)對(duì)象方法)
<body>
<input type="button" value="按鈕" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(5);
});
</script>
每一個(gè)節(jié)點(diǎn)對(duì)象都提供了 addEventListener 方法，這個(gè)方法可以給選中的節(jié)點(diǎn)添加指定類型的事件及事件處理程序；
