JS之事件

事件：交互

异步监听，不是JS引擎监听的

一、绑定
1.

ele.onxxxx(eg:onclick) = function (e) {
//回调函数/事件处理函数
}

兼容性很好，但同一个事件仅能绑定一个处理函数
等同在html行间写
this指向本身

2.

obj.addEventListener(事件type《字符串》, 处理函数, false);
div.addEventListener('click', function(){
　　console.log('hald');
},false );
div.addEventListener('click', function(){
　　console.log('hald1');
} ,false);

同一个事件能同时绑定多个处理函数
但IE9以下不兼容
this指向本身

3.

obj.attachEvent('on' + 事件type,function(){
    console.log(hald);
} );

IE独有
同一个事件能同时绑定多个处理函数
*this指向window*

// 通过call改变this指向
div.attachEvent('onclick',function (){
    test.call(div);
} )

4

// 绑定事件的封装（兼容IE）
function addEvent(ele, type, handle){
    if(ele.addEventListener) {
        ele.addEventListener(type,handle,false);
    }else if(ele, attachEvent){
        ele['temp' + type + handle] = handle    
        /*匿名函数无法解除绑定，重新写成显示函数使可以解除绑定*/
        ele[type + handle] = function(){
        ele['temp' + type + handle].call(ele);
        } 
        ele.attachEvent('on' + type, ele[type + handle]);
    }else{
        ele['on' + type] = handle;
    }
}                

二.解除绑定

（1） div.onclick = null / '' / false; 

  (2)  div.removeEventListener(type, fn(不能是匿名，必须有名字，必须同一个函数), false); 

（3） div.detachEvent('on' + type,fn（不能是匿名，必须有名字，必须同一个函数）)； 

　　若绑定的事件处理函数是匿名函数，第二种方法和第三种方法无法解绑

（4）解除事件函数封装（兼容IE）

/*解除事件绑定封装*/
function removeEvent(ele,type,handle){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handle,false);
    }else if(ele.detachEvent){
        ele.detachEvent('on' + type, handle);
    }else {
        ele['on' + type] = null;
    }
}    

三、冒泡和捕获机智

事件冒泡

　　结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父 元素。（自底向上）

　　几乎所有事件都有事件冒泡，除个别特殊的

事件捕获

　　结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子 元素（事件源元素）。（自顶向下）

注意：

（1）IE没有捕获事件，仅有谷歌有捕获事件

（2）如果既有冒泡，又有捕获，则先捕获，后冒泡

（3）同一个dom上绑定多个相同类型事件，执行是先绑定的，先执行 

（4）focus,blur,chaneg,submit, reset,select等事件不冒泡

四、取消冒泡 和 取消默认事件：

1.取消冒泡：

（1）w3c标准： event.stopPropagation() ,不支持IE9以下版本

（2）IE独有： event.cancelBubble = true 

  (3)取消冒泡封装（兼容IE）：

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

2.取消默认事件：

默认事件：表单提交、a标签跳转、右键菜单
（1） return false;  以对象属性的方式注册的事件才生效(例如： document.contextmenu = function(){/*右键菜单事件*/} ) 
eg：

document.oncontextmenu = function(){//右键触发事件
    console.log('a');
    return false;//只有类似document这种形式绑定的事件才有用
}

  (2)  event.preventDefault()  w3c标注，IE9以下不兼容

（3） event.returnValue = false  兼容IE

（4）封装兼容IE取消默认事件

/*因为return false；适用条件比较特殊，所以没有封装到函数内*/
function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else {
        event.returnValue = false;
    }
}

（5） <a href = "javascript:void(null)"></a> 阻止a默认，古老方式，了解即可

五、事件对象

1. event || window.event  用于IE

　　IE不会向事件处理函数形参传递事件对象（其他浏览器会），而是将其传入window的event属性上；

2.无论冒泡 或者 捕获都存在第一个点击的对象，即事件源对象

获取方法：
（1） event.target  火狐独有

（2） event.srcElement  IE独有

（3）上述两个谷歌都有

（4）兼容性写法： var tar = event.target || event.srcElement 

六、事件委托：利用事件冒泡，和事件源对象处理

eg：

点击事件添加到父元素上，当点击子元素时，由于冒泡事件，所以父元素的点击事件也会被触发，在父元素的点击事件内获取事件源对象（即真正被点击的对象），然后进行源对象的处理即可。

优点：

（1）性能 ,不需要循环所有的元素一个个绑定事件，仅需绑定一个父元素即可

（2）灵活， 当有新的子元素时，不需要重新绑定事件