DOM事件

1 两种事件绑定方式

1.1 DOM0

obj.onclick = fn;	

1.2 DOM2

1.2.1 ie

obj.attachEvent(事件名称，事件函数);

1. 没有捕获(非标准的ie标准的ie底下有 ie6到10)
2. 事件名称有on
3. 事件函数执行的顺序：标准ie```-->``正序 ；非标准ie```–>`` 倒序
4. this指向window

1.2.2 标准

obj.addEventListener(事件名称，事件函数，是否捕获);

1. 有捕获
2. 事件名称没有on
3. 事件执行的顺序是正序
4. this触发该事件的对象

document.attachEvent('onclick', fn2);
document.attachEvent('onclick', function() {
	fn1.call(document);
});

// 是否捕获 : 默认是false    false:冒泡 true：捕获

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);

---

【注意】：

1. ie代表了:非标准ie 和 标准ie
2. 标准代表了:标准ie和chrome Firefox等…

2 同步this

function bind(obj, evname, fn) {
	if (obj.addEventListener) {//除ie低版本外都可以进入
		obj.addEventListener(evname, fn, false);
	} else {
		obj.attachEvent('on' + evname, function() {
			fn.call(obj);
		});
	}
}

bind(document, 'click', fn1);

3 两种绑定方式的区别

取消冒泡的手段：

event.cancelBubble = true;
event.stopPropagation();

• 第一种
  • 默认冒泡,
  • 一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
• 第二种
  • attachEvent
    默认冒泡
  • addEventListener
    是否捕获 : 默认是false
    第三个参数:false:冒泡；true：捕获
  • 一个元素上可以绑定多个同类事件,它们都会被执行

4 事件解绑

• DOM0:想解除事件就相当简单了，只需要再注册一次事件，把值设成null，原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。DOM0事件模型还涉及到直接写在html中的事件：因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
• DOM2:removeEventListener。解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡")。还有ie浏览器的detachEvent(ie)。

5 总结

1. onclick形式:冒泡
2. attachEvent:冒泡
3. addEventListener:第三个参数(false:冒泡;true:捕获)