事件监听和事件委托
现象：什么是事件冒泡或事件捕获？事件传递有两种方式：冒泡与捕获
事件传递定义了元素事件触发的顺序。如果将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>
在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>
事件监听
事件监听：addEventListener()
监听式绑定事件（DOM2)：在赋值绑定中(DOM0级)给同一个事件源绑定多个相同事件时，后绑定会把前书写覆盖，而采用监听式绑定每个事件都会被触发。
封装：注意删除时一定是删除事件处理函数的名字
//设置事件
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);
}
}
事件委托
一：事件的委托：把原本要加给多个子元素的相同事件，我们直接把这个事件加给他们共同的父元素。利用事件的冒泡原理，配合事件源找到真正的触发的子元素。
二：事件委托的好处：
1.节省了性能（只给他的父元素加事件减少DOM的操作）
2.可以给页面上暂时不存在的元素加事件
三: 事件监听的实现：
1.event对象提供的target属性，可以返回真正的目标节点也就是触发的事件源
2.target的兼容写法：
var target = ev.target || ev.srcElement // 兼容IE
3.this和target：在事件监听中一般不会使用this，this在事件监听中指的事件源而不是真正的所点击的触发事件源的节点，target属性可以返回真正的目标节点也就是触发的事件源
实例：
<!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>
