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*
div.attachEvent('onclick',function (){
test.call(div);
} )

4/**/
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）/*封装*/
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）focus,blur,chaneg,submit, reset,select等事件不冒泡
四、取消冒泡 和 取消默认事件：
1.取消冒泡：
（1）w3c标准：event.stopPropagation(),不支持IE9以下版本
（2）IE独有：event.cancelBubble = true;
(3)取消冒泡封装：
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）灵活， 当有新的子元素时，不需要重新绑定事件