1. 程式人生 > >js onclick與addEventListener 區別及用法

js onclick與addEventListener 區別及用法

nbsp scala 一段 onclick 元素 user 不同的 公司 utf-8

addEventListener(建議使用)好比一個監聽容器,這個容器裏面可以裝很多個監聽事件,而且每一個事件都會執行。

onclick 在今天之前我使用這個(onclick)比較多(單純的是因為看到的基本都是用這個,有個缺點就是同一個元素綁定兩個不同的事件前一個事件會被後一個事件覆蓋。

今天在公司問了一下這兩個的區別,印象很深刻,自己也驗證了一下,我這裏上一段我的驗證代碼(代碼裏面的‘222’會被覆蓋不彈出),大家也可以試一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onclick and addEventListener</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="btnOk1">111</div>
<script>
document.getElementById(‘btnOk1‘).addEventListener(‘click‘,function(){
alert(‘111‘);
});
document.getElementById(‘btnOk1‘).addEventListener(‘click‘,function(){
alert(‘333‘);
});
document.getElementById(‘btnOk1‘).onclick = function(){
alert(‘222‘);
}
document.getElementById(‘btnOk1‘).onclick = function(){
alert(‘444‘);
}
</script>
</body>
</html>

js onclick與addEventListener 區別及用法