關于點擊事件onclick 和 addEventListener的思考
基本寫法
box.onclick = function(){
console.log('onclick 點擊');
}
box.addEventListener('click', function(){
console.log('EventListener 點擊');
});
onclick 和 addEventListener 聯系
兩者都可以監聽到點擊事件
onclick 和 addEventListener 區別
on執行事件的特點：
如果多次執行，會覆蓋掉之前的執行，只保留最后一次
addEventListener執行事件的特點:
所有的事件都會被觸發，遵循的是冒泡規律
addEventListener
語法
element.addEventListener(event, function, useCapture)
參數值
| 參數 | 描述 |
|---|---|
| event | 必須:指定事件名 |
| function | 必須:指定事件觸發時執行的函數 |
| useCapture | 可選: 布爾值. true 事件句柄在捕獲階段執行 false 事件句柄在冒泡階段執行 |
需求一:
假如有一個盒子，在頁面的某一個地方，我需要監聽盒子的點擊。在請求完之后，我需要再次監聽盒子的點擊。也就是說，盒子會被多次點擊，但是每次點擊執行的東西不一樣。
可以這樣寫:
box.onclick = function(){
console.log('onclick 電擊');
}
box.onclick = function(){
console.log('onclick 二次點擊');
}
思考一下，這樣寫有沒有邏輯問題？語法問題？執行后是什么效果？
答案是:始終執行第二次，第一次點擊被覆蓋掉了
真正的需求是，每次點擊都必須監聽到，所以嘞？
box.addEventListener('click', function(){
console.log('EventListener 點擊');
});
box.addEventListener('click', function(){
console.log('EventListener 二次點擊');
});