关于JavaScript的事件绑定
2018-05-31 本文已影响9人
西岭老湿
- 行内方式绑定(元素属性)
<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 方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
