今天在敲代码的时候遇到的问题,刚好有空。就记了下来。
首先,我们应该知道,在绑定事件的时候有三种方法。
拿最简单的click举例说明下。第一种,直接在html中,使用onclick;第二种,在js代码中使用元素.click来调用;第三种就是事件元素.addEventListener()来调用。
那么他们的区别在哪呢?
<div class="test">
这是一段测试使用代码
</div>
在js代码中用on绑定,如下
window.onload = function () {
var box = document.getElementsByClassName('test')[0];
box.onclick = function () {
console.log('点击事件1');
};
box.onclick = function () {
console.log('点击事件2');
};
//点击事件2
}
很清楚在控制台可以看到输出的只有 “点击事件2”;
window.onload = function () {
var box = document.getElementsByClassName('test')[0];
box.addEventListener('click',function () {
console.log('点击事件1');
});
box.addEventListener('click',function () {
console.log('点击事件2');
});
//点击事件1
//点击事件2
}
那么显而易见,使用on绑定的事件会覆盖,而addEventListener则可以为一个元素绑定多个事件,且保证全都会被执行。
关于addEventListener还有第三个参数,如下