event

关于事件

事件级别

• DOM0 elem.onclick = function(){};
• DOM2 elem.addEventListener(‘click’,function(){},false);
• DOM3 elem.addEventListener(‘keyup’,function(){},false);

DOM2

• addEventListener(‘click’,function(){},false); removeEventListener(‘click’,function(){},false)
• 第三个参数默认为false, 即采用冒泡事件。
• ie => attachEvent(‘onclick’,function(){});

事件模型

• 捕获和冒泡

事件的三个阶段

• 捕获 => 目标 => 冒泡
• ie 只冒泡不捕获。

捕获

事件由页面元素接收,逐级向下，直到具体元素。

目标

具体元素本身

冒泡

事件由具体元素接收，逐级向上，直到页面元素。

event兼容处理

阻止事件方法

e.stopPropagation() ie=> e.cancelBuble = true;

阻止默认行为

e.preventDefault() ie=> e.returnValue = false;

e

e = e | window.event

target

target = e.target | e.srcElement

currentTarge、this是和“注册监听器的对象”是一伙。target和“当前目标对象”是一对。

自定义事件

var eve = new Event('custome');
e.addEventListener('custome',function(){});
e.dispatchEvent('eve');

事件委托

概念

利用事件冒泡的原理，将事件绑定到父元素或祖先元素上，触发执行效果。

#####　优点

• 减少内存，减少事件绑定
• 新增的子对象无需再次绑定事件

定义一个事件监听函数要求满足兼容性要求

function bind(elem,listener,selector,fn){
	if(!fn){
		fn = selector;
		selector = null;
    }

    if(elem.addEventLiseter){
    	elem.addEventLiseter('listener',Event(e))
    }else{
    	elem.attachEvent('on'+ listener,Event(e))
    }

    function Event(e){
    	e = e | window.event;
    	var target = e.target | e.srcElement;

    	if(target.matches(selector)){
    		fn.call(target,e)
    	}else{
    		fn(e)
    	}
    }
}