今天我们将学习在JavaScript 中的三种绑定事件的方法。这在面试中也是一道必考题目。
目录
- 行内绑定
- DOM 0级事件绑定
- DOM 2级事件绑定
1)行内绑定事件
行内事件名称通常是以on
开头,比如点击事件为onclick
,要将事件处理程序和元素关联,我们在元素上增加对应的事件属性,比如:
<button onclick="alert('点击我!')">保存</button>
当然事件处理程序可以调用已定义的函数。 例如:
<script>
function showAlert() {
alert('点击我!')
}
</script>
<button onclick="showAlert()">保存</button>
要点
以下是HTML属性绑定事件的一些要点:
首先,事件处理程序中的代码无需显式定义事件对象:
<button onclick="alert(event.type)">保存</button>
其次,事件处理程序中的 this
值相当于事件的目标元素:
<button value="我是value值" onclick="alert(this.value)">保存</button>
第三,事件处理程序可以访问元素的属性,例如:
<button value="我是value值" onclick="alert(value)">保存</button>
缺点
使用HTML属性来绑定事件是不推荐的做法,主要有以下原因
- 事件处理程序代码与 HTML 代码混合在一起,这会使代码更难维护和扩展。
- 加载时机问题,如果元素在 JavaScript 代码之前加载完成,用户点击元素触发事件,这将会报错,引用JavaScript还没加载完。
2)DOM 0级事件绑定
每个元素都有事件绑定属性,比如onclick
,要绑定事件可以将其赋值一个函数,例如:
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
btn.onclick = function() {
alert('点到了!');
};
</script>
这种情况下,匿名函数成为按钮元素的方法,所以,this
值等同于该元素,我们可以在该事件处理函数内访问元素的属性,比如:
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
btn.onclick = function() {
alert(this.id); // btn
};
</script>
要删除事件绑定,我们将该元素的事件绑定属性设置为null
btn.onclick = null;
3)DOM 2级事件绑定
DOM 2级事件主要提供了两种方法,来处理事件监听和删除事件监听
addEventListener()
– 添加事件监听removeEventListener()
– 删除事件监听
addEventListener()
方法
addEventListener()
方法接受3个参数:事件名称、事件处理函数和表示捕获阶段 (true
) 或冒泡阶段 (false
) 期间调用事件处理函数的布尔值。
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
alert(event.type); // click
});
</script>
我们也可以添加多个事件监听来处理同类的事件
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
alert(event.type); // click
});
btn.addEventListener('click', function(event) {
alert('点到了!');
});
</script>
removeEventListener()
方法
使用removeEventListener()
可以删除通过 addEventListener()
添加的事件监听器。 但是,需要传入与传给 addEventListener()
相同的参数。 例如:
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
// 添加事件监听
let showAlert = function() {
alert('点到了!');
};
btn.addEventListener('click', showAlert);
// 删除事件监听
btn.removeEventListener('click', showAlert);
</script>
使用匿名函数将不起作用
<button id="btn">点击我</button>
<script>
let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
alert('点到了!');
});
// 不起作用
btn.removeEventListener('click', function() {
alert('Clicked!');
});
</script>
总结
今天我们总结了DOM中3种事件绑定方式,在日常开发中推荐使用addEventListener()
方式来去绑定事件,因为行内绑定和DOM 0级绑定方式对于多监听器,和删除事件绑定上支持并不友好。
一起学习更多前端知识,微信搜索【小帅的编程笔记】,每天更新