onclick与addEventListener(‘click’,function(){ })的区别
1.onclick
代码
<!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>
<div id="demo" style="width: 300px; height: 300px;background: #eee;"></div>
<script>
let demo = document.querySelector("#demo");
demo.onclick = () => {
console.log(111);
};
demo.onclick = () => {
console.log(222);
};
</script>
</body>
</html>
打印的结果
我们可以发现第二个点击事件把第一个点击事件覆盖掉了
2.addEventListener(‘click’,function(){ })
<!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>
<div id="demo" style="width: 300px; height: 300px; background: #eee;"></div>
<script>
let demo = document.querySelector("#demo");
demo.addEventListener("click", function () {
console.log(111);
});
demo.addEventListener("click", function () {
console.log(222);
});
</script>
</body>
</html>
打印的结果
使用监听点击事件时这时两个都是可以打印出来的