事件捕获、事件冒泡
事件监听: 允许对同一个事件进行多次监听（添加多个事件处理函数）
element.addEventListener("事件名", 事件处理函数, 是否采取捕获boolean --默认false)
取消事件绑定：
element.removeEventListener("事件名", 声明函数的名字)
element.on事件名 = null
捕获事件：目标元素的父类元素能够捕捉到子类添加的事件，当事件触发时，可以先行触发自己相应事件的绑定函数
事件冒泡：目标元素事件触发后，事件会沿着DOM树向它的父类元素传递，触发父类元素对应的事件处理函数目标元素触发事件 --> 目标元素父系元素执行捕获事件，从DOM树上层向下层传递 --> 目标元素执行自身事件 --> 目标元素父系元素执行冒泡事件，从DOM树下层向上层传递
事件委托
利用事件的冒泡机制与event.target可以找到触发事件元素的特性，实现子元素的事件委托给父元素监听的过程。
优点：
1. 节省了DOM操作次数
2. 新添加的子元素也能拥有事件
<ul class="ul">
<li>li_1</li>
<li>li_2</li>
<li>li_3</li>
<li>li_4</li>
</ul>
<button class="btn">新增li</button>
<script>
//
var ulEl = document.querySelector('.ul');
// 循环绑定事件
var lis = document.querySelectorAll('.ul>li');
//
var btn = document.querySelector('.btn');
// for(var i = 0 ; i < lis.length ; i ++){
// lis[i].onclick = function(){
// console.log(this.innerText);
// }
// }
btn.onclick = function(){
lis = document.querySelectorAll('.ul>li');
// 1. appendChild
// 2. innerHtml
var li = document.createElement('li');
li.innerText = 'li_'+(lis.length+1); // li_5
ulEl.appendChild(li);
}
// 如何给新增的元素添加事件??
ulEl.onclick = function(e){
// 触发点击事件对象
var target = e.target;
// 判断过滤委托对象本身(ul)
// if(target.tagName(''))
// console.log(target.tagName);
if(target.tagName == 'LI'){
//给目标元素添加事件即可
console.log(target.innerText);
}else{
console.log('点歪了...');
}
}
</script>
行为型事件委托
根据某个特征声明一类事件，用文档对象监听事件。
<body>
<button data-count="0">0</button>
<p data-count="0">0</p>
<span data-count="0">0</span>
<div>14</div>
<p data-color="orange">忽如一夜春风来，千树万树梨花开。</p>
<h3 data-color="purple">李白乘舟将欲行，忽闻岸上踏歌声。</h3>
<script type="text/javascript">
/*
行为型事件委托：根据某个特征声明一类事件，用文档对象监听事件
*/
document.body.addEventListener("click", function () {
if(event.target.dataset.count){
event.target.innerText = Number(event.target.innerText) + 1;
}
})
document.body.addEventListener("click", function () {
if(event.target.dataset.color){
event.target.style.color = event.target.dataset.color;
}
})
</script>
</body>