[记录] JavaScript 中的事件(Event对象、事件源对象、事件流、事件绑定)

event对象:
什么是event对象：用来获取事件的详细信息。(如：键盘的状态、鼠标的位置、鼠标按钮的状态)
event对象浏览器兼容问题：

function (ev) {
    // IE: 支持window.event
    // 标准： 事件处理函数传入的ev对象
    var ev = ev || window.event;
}

事件源对象：

FF: event.target
IE: event.srcElement
Chreme 都支持
兼容写法：
var target = event.target || event.srcElement;

事件委托：

什么是事件委托： 通俗的讲就是委托长辈来执行事件。
把事件绑定到事件源对象的祖先元素上，利用事件冒泡原理触发事件。
优点：
1. 提高性能，不需要循环所有元素一个一个绑定事件。
2. 灵活，有动态创建进来的新元素不需要重新绑定事件。

事件流：

事件捕获：(从外往里，一层一层触发)
事件冒泡：(从里往外 -> 一层一层触发) 在一个元素对象上触发某类事件(如onclick事件), 那么这个事件就会向这个元素对象的父级传递，直到最顶级document对象或window对象。传递对象上所有同类事件都将被激活。
优点：
事件冒泡允许多个操作被集中处理(把事件处理函数添加到一个父级元素上，避免把事件处理函数添加到多个子元素上), 它还可以让你在对象层的不同层捕获到事件。
缺点：
有时候会出现干扰，因此需要阻止事件冒泡；

阻止事件冒泡：
IE： event.cancalBubble = true; 
W3C标准: event.stopPropagation();IE9以下版本不支持
封装阻止事件冒泡函数：
function stopBubble(ev) {
    var ev = ev || window.event;
    if(ev.stopPropagation) {
        ev.stopPropagation();
    }else{
        ev.cancelBubble = true;
    }
}

阻止默认事件：
默认事件：如表单提交，a标签跳转，右键菜单等...

1. return false; 只有以对象属性的方式注册的事件才生效;
2. event.preventDefault(); W3C标准，IE9以下不兼容
3. event.returnValue = false; IE
封装阻止默认事件函数：
function cancelHandler(ev){
	var ev = ev || window.event;
	if(ev.preventDefault) {
		ev.preventDefault();
	}else{
		ev.returnValue = false;
	}
}

事件绑定/解除绑定
添加事件的方式：
1. 普通添加事件(一个元素的同一个事件上只能绑定一个事件处理函数，后定义的覆盖之前定义的)

   oBtn.onclick = function() { console.log('A'); }
   oBtn.onclick = function() { console.log('B'); }

2. 绑定的方式添加事件(可以添加多个事件处理函数)

   标准浏览器：
   添加绑定
   obj.addEventListener(type[事件名称], fn[事件处理函数], 是否捕获true/false);    
   解除绑定
   obj.removeEventListener(type[事件名称], fn[事件处理函数],是否捕获true/false);
   注意：三个参数、事件名不带on、事件处理函数先绑定先执行、this指向绑定事件的对象。

   IE：
   添加绑定 
   obj.attachEvent('on'+type[事件名称], fn[事件处理函数]);
   解除绑定
   obj.detachEvent('on'+type[事件名称], fn[事件处理函数]);
   注意： 两个参数、事件名带on、事件处理函数先绑定后执行、this指向window。
   
   绑定事件封装：  
   给某个对象，绑定某个事件，执行某个函数
   function addEvent(elem, type, handle) {
        if(elem.addEventListener) {
            elem.addEventListener(type, handle, false);
        }else if(elem.attachEvent) {
            elem.attaceEvent('on' + type, fnction() {
                handle.call(elem);
            });
        }else{
            elem['on' + type] = handle;
        }
   }
 
   解除绑定事件封装：(匿名函数无法解绑)
   function removeEvent(elem, type, handle) {
        if(elem.removeEventListener) {
            elem.removeEventListener(type, handle, false);
        }else if(elem.detachEvent) {
            elem.detachEvent('on' + type, function() {
                handle.call(elem);
            });
        }else{
            elem['on' + type] = null;
        }
   }

[记录] JavaScript 中的事件(Event对象、事件源对象、事件流、事件绑定)

推荐阅读