事件就是发生在
HTML
元素上的“事情”
。例如这个
div
标签被用户点击(
click
事件),或
者是浏览器已经完成页面加载(
load
事件),又或者鼠标移动到某个
HTML
元素上(
mouseover
事件)等等,当这些事件触发时,我们要让程序去做一些操作,这些操作被称为
事件的响应
。
1.JavaScript 事件的绑定
1.JavaScript 事件的绑定
常用的绑定方式有三种:
通过
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
关键字
绑定事件监听函数
语法为:元素
.addEventListener(
事件名
,
执行程序
,true/false)
<button id="isButton">按钮</button>
<script>
let isButton = document.getElementById('isButton');
isButton.addEventListener('click',function() {
alert('事件响应');
})
</script>
此方法可以重复绑定相同的事件,或是绑定多个事件,并且
不需要加
on
前缀
注意:
参数
3
为可选项,如果为
true
表示事件处理程序以捕捉模式触发;从顶层的父节点开始触发
事件,从外到内传播。简称
事件捕获
。
默认参数是
false
,事件处理程序以冒泡模式触发;从最内层的节点开始触发事件,逐级冒泡
直到顶层节点,从内向外传播。简称
事件冒泡
。