涉及知识点：
原生EVENT：
- 事件流：冒泡、捕获
- 事件代理（事件委托）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.active{background: red;}
</style>
<div id="box">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
</div>
(function(){
let box = document.querySelector('#box');
let btns = box.querySelectorAll('input');
document.addEventListener('click', functon(e){
//e.target 事件源(事件目标) 事件具体发生在哪个元素上
if(e.target.tagName === 'INPUT'){
console.log(e.target.value);
btns.forEach((item)=>{
item.classList.remove('active');
});
e.target.classList.add('active');
};
})
})();
- 事件对象
- 事件监听和事件绑定