今天我们将学习在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级绑定方式对于多监听器，和删除事件绑定上支持并不友好。
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新