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