事件 ---- 添加事件的几个方式--解除事件处理函数---事件冒泡，捕获--取消冒泡-事件-----阻止默认事件

绑定事件的几个方式
1.ele.onxxx=function(event){}  例如div.onclick=function(){}---div是dom元素
兼容性很好，但是同一元素的同一事件只能绑定一个处理函数   ---on绑定事件的方式叫句柄的方式
基本等同于写在HTML行间上
2.obj.addEventListener(type,fn,false); --IE9一下不兼容，可以为一个对象的一个事件绑定多个处理函数
 --多个处理函数是指假设div.addEventListener('click',test,false) function test(){} 这样绑定多个的话输出的是一个，因为他是一个函数，想要输出多个就要text改成function(){}让他两个函数的地址不一样
                    （事件类型，处理函数，false）  ---比如('click',function(){},false)
3.obj.attachEvent('on' + type,fn);   -->div.attachEvent('onclick',function(){})
IE独有，一个事件可以绑定多个处理程序

事件处理程序的运行环境
1.ele.onxxx = function(event){}  --程序this指向的是dom元素本身
2.obj.addEventListener(type,fn,false) -->type比如click ，程序this指向的是dom元素本身
3.obj.attachEvent('on' + type,fn); --程序this指向window

二.封装给一个dom对象添加该事件类型的处理函数,

    function addEvent(elem,type,handle){
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else if(elem.attachEvent){
            elem.attachEvent('on'+type,function(){
                handle.call(elem);
            })
        }else{
            elem['on'+type] = handle;
        }
    }

三，解除事件处理程序

1.ele.onclick=false/''/null;
2.ele.removeEventListener(type,fn,false);
3.ele.detachEvent('on'+type,fn)               ---对应上面三个绑定事件函数
若绑定匿名函数，则无法清除 ---所以想要清除一般把函数写在外面function test(){} 然后事件里面直接调用test;
  接触事件处理函数里面的参数必须跟添加事件的时候参数一一对应

四，事件处理模型--事件冒泡，事件捕获

事件冒泡
1.结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能，即同一事件,自子元素冒泡向父元素(自底向上)
2.事件捕获
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能，即同一事件,自父元素捕获至子元素(事件源元素).(自顶向下)  --跟冒泡是反的，想要触发捕获把 
ele.removeEventListener(type,fn,false)false改成true就可以。
捕获触发的是从结构上来说先触发外面的然后依次往里，冒泡是先出发里面的然后往外冒泡
IE没有捕获事件只有谷歌
如果有三层嵌套，触发捕获，点击最里面的会先触发最外面的然后依次往里，点击的那个不是捕获是正常执行。 如果两个事件的话正常执行的部分是按代码的先后顺序执行
3.触发顺序，先捕获，后冒泡    ---一个对象一个事件只能遵循一种事件模型，要么捕获要么冒泡--可以设置两个事件那么就会有先后顺序
4.focus,blur,change,submit,reset,select等事件不冒泡

五，取消冒泡，阻止默认事件

1.不绑定事件处理函数有时候也会发生事件比如给document.onclick绑定事件，假如有一个小方块点击小方块就会触发事件--产生冒泡；所以要有取消冒泡功能。
2.在每一个事件处理函数里面可以写一个形参，系统会帮传一个事件对象，上面有很多属性，其中有一个属性就是W3C标准给出的event.stopPropagation()但不支持IE9以下版本
比如：div.onclick = function(e){e.stopPropagation()}就会阻止冒泡
3.Ie独有(现在谷歌也可以用了) event.cancelBubble = true;

六，封装取消冒泡函数

  function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }


下面的是例子
    document.onclick=function(){
        console.log("asas");
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick=function(e){
        this.style.backgroundColor="green";
        stopBubble(e);
    }

七，阻止默认事件

默认事件--表单提交，a标签跳转，右键菜单等
1.return false;以对象属性的方式注册的事件才生效 只能用于句柄状态下(就是on开头的事件)
2.event.preventDefault();W3C标注，IE9以下不兼容
3.event.returnValue = false;兼容IE


例子： var a =document.getElementsByTagName('a')[0];   ---取消a的默认事件
       a.onclick = function(){
         return false;
        }


还可以这样写<a href="javascript:void(false)">demo</a>  ---这里写void相当于return

八，封装阻止默认事件的函数cancelHandler(event)  ---比如右键出菜单

    function cancelHandler(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }

九，事件对象 ，事件源对象

事件对象  e是事件对象
在IE浏览器他会把事件对象传进window.event,谷歌可以用e
div.onclick = function(e){
   var event = e || window.event;
}
事件源对象： -->点击的那个区域事件源就会返回谁
 event.taget 火狐只有这个        ---这两个方法谷歌都有，event是事件对象
 event.srcElement IE只有这个


事件源对象兼容性写法
var target = event.target || event.srcElement;
在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。
事件源对象的作用--有一个东西叫事件委托：利用事件冒泡，和事件源对象进行处理
优点：1.性能 不需要循环所有的元素一个一个绑定事件
2.灵活 当有新的子元素时不需要重新绑定事件

例如：
    <ul>
      <li>1</li>            
      <li>2</li>
      <li>3</li>          直接利用父级间接采用事件冒泡实现子元素的功能，
      <li>4</li>          利用源对象方法调用innerText就可以输出文本内容
      <li>5</li>
    </ul>

var ul = document.getElementsByTagName('ul')[0];
      ul.onclick = function(e){
        var event = e || window.event;
        var target = event.target || event.srcElement;
        console.log(target.innerText);
      }