注册事件的两种方式:1.传统注册事件
2.事件侦听注册事件 addEventListener
区别:传统注册事件:后面的事件会覆盖前面的事件
事件侦听注册事件:不会覆盖前面的事件
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统</button>
<button>侦听</button>
<script>
// 1.传统注册事件:后面的事件会覆盖前面的事件
var btn = document.querySelectorAll('button')
btn[0].onclick = function() {
alert('1');
}
btn[0].onclick = function() {
alert('2');
}
//2.事件侦听注册事件 addEventListener
// (1)里面的事件类型是字符串
// (2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)
btn[1].addEventListener('click', function() {
alert('haha');
})
btn[1].addEventListener('click', function() {
alert('heihei');
})
</script>
</body>
</html>
结果
点击传统注册事件只会弹出 “2” 提示框
点击事件侦听注册事件可以弹出全部提示框