事件

绑定事件的三种方法

ele.onxxx = function (event){}

兼容性很好，但是一个元素的同一个事件上只绑定一个函数
基本等同于写在HTML行间上
程序this指向dom元素本身

obj.addEventListener(type,fn,false)

IE9以下不兼容，可以给一个对象绑定多个处理函数
不能重复的把同一个函数绑定多次（重复的执行一次）
程序this指向dom元素本身

obj.attachEvent('on'+type,fn)

IE独有，一个事件同样可以绑定多个处理程序
同一个函数绑定多次也能执行多次
程序this指向window
封装 兼容性函数

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;
        }
    }

解除事件处理程序

    ele.onclick = false/''null;
    ele.removeEventListener(type,fn,false);
    ele.detachEvent('on'+type,fn)

若绑定匿名函数，则无法解除

事件处理模型

事件冒泡
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
事件捕获
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自定向下）
IE没有捕获事件
触发顺序，先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡

取消冒泡

W3C标准event.stopPropagation()但不支持ie9以下版本
IE独有event.cancelBubble = true
封装取消冒泡的函数 stopBubble(event)

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

取消默认事件

默认事件 ---表单提交，a标签跳转，右键菜单等

return false;以对象属性的方式注册的事件才生效
event.preventDefault();W3C标注，IE9以下不兼容
event.returnValue = false;兼容IE

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

事件对象

event ||window.event 用于IE
事件源对象
event.target 火狐只有这个
event.srcElement IE只有这个
chrome两种都有

事件委托

性能 不需要循环所有的元素一个个绑定事件
灵活 当所有新的子元素时不需要重新绑定事件

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</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);
     }