常用的绑定方式有三种:
1.
通过
on
在
DOM
元素中直接绑定
<button onclick="fn()">按钮</button>
<script>
function fn() {
alert('事件响应');
}
</script>
2.在 JavaScript 代码中绑定
<button id="isButton">按钮</button>
<script>
let isButton = document.getElementById('isButton');
isButton.onclick = function () {
alert('事件响应');
}
</script>
以上两种方式不能重复绑定相同事件,且事件前需要加上
on
关键字。
3.
绑定事件监听函数
语法为:元素
.addEventListener(
事件名
,
执行程序
,true/false)
<button id="isButton">按钮</button>
<script>
let isButton = document.getElementById('isButton');
isButton.addEventListener('click',function() {
alert('事件响应');
})
</script>
此方法可以重复绑定相同的事件,或是绑定多个事件,并且
不需要加
on
前缀。
注意:
参数
3
为可选项,如果为
true
表示事件处理程序以捕捉模式触发;从顶层的父节点开始触发
事件,从外到内传播。简称
事件捕获
。
默认参数是
false
,事件处理程序以冒泡模式触发;从最内层的节点开始触发事件,逐级冒泡
直到顶层节点,从内向外传播。简称
事件冒泡
。