事件監(jiān)聽和事件委托
現(xiàn)象：什么是事件冒泡或事件捕獲苔可？事件傳遞有兩種方式：冒泡與捕獲
事件傳遞定義了元素事件觸發(fā)的順序缴挖。如果將<p>元素插入到<div>元素中，用戶點(diǎn)擊<p>元素焚辅，哪個(gè)元素的“click”事件先被觸發(fā)呢醇疼？
在冒泡中硕并，內(nèi)部元素的事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素秧荆，即：<p>元素的點(diǎn)擊事件先觸發(fā)倔毙，然后會(huì)觸發(fā)<div>
在捕獲中，外部元素會(huì)先被觸發(fā)乙濒，然后才會(huì)觸發(fā)內(nèi)部元素的事件陕赃，即：<div>元素的點(diǎn)擊事件先觸發(fā)，然后再觸發(fā)<p>
事件監(jiān)聽
事件監(jiān)聽：addEventListener()
監(jiān)聽式綁定事件（DOM2)：在賦值綁定中(DOM0級(jí))給同一個(gè)事件源綁定多個(gè)相同事件時(shí)颁股，后綁定會(huì)把前書寫覆蓋么库，而采用監(jiān)聽式綁定每個(gè)事件都會(huì)被觸發(fā)。
封裝：注意刪除時(shí)一定是刪除事件處理函數(shù)的名字
//設(shè)置事件
function addEvent(ele,type,callback){
if(ele.addEventListener){
ele.addEventListener(type,callback,false);
}else if(ele.attachEvent){
ele.attachEvent('on'+type,callback);
}
}
//取消事件
function removeEvent(ele,type,callback){
if(ele.removeEventListener){
ele.removeEventListener(type,callback,false);
}
else{
ele.detachEvent('on'+type,callback);
}
}
事件委托
一：事件的委托：把原本要加給多個(gè)子元素的相同事件甘有，我們直接把這個(gè)事件加給他們共同的父元素诉儒。利用事件的冒泡原理，配合事件源找到真正的觸發(fā)的子元素亏掀。
二：事件委托的好處：
1.節(jié)省了性能（只給他的父元素加事件減少DOM的操作）
2.可以給頁面上暫時(shí)不存在的元素加事件
三: 事件監(jiān)聽的實(shí)現(xiàn)：
1.event對(duì)象提供的target屬性忱反，可以返回真正的目標(biāo)節(jié)點(diǎn)也就是觸發(fā)的事件源
2.target的兼容寫法：
var target = ev.target || ev.srcElement // 兼容IE
3.this和target：在事件監(jiān)聽中一般不會(huì)使用this，this在事件監(jiān)聽中指的事件源而不是真正的所點(diǎn)擊的觸發(fā)事件源的節(jié)點(diǎn)滤愕，target屬性可以返回真正的目標(biāo)節(jié)點(diǎn)也就是觸發(fā)的事件源
實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 100px;height: 100px;background:#f00;}
</style>
<style>
ul li{width: 200px;height: 50px;background: #ccc;margin-top:10px;}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var ulobj=document.querySelector('.box');
ulobj.onclick=function(){
var e=event||window.event;
var target=e.target||e.srcElement;
if(target.nodeName=='LI'){
console.log(target);
}
}
</script>
</body>
</html>
