JavaScript学习笔记

两者区别

在IE9及其以上版本已经支持W3C的标准模型
在IE8及其以下版本不支持W3C的标准模型，注意兼容性问题。

var test1  = document.getElementById('test1');
if(test1.attachEvent){
	test1.attachEvent('onclick',function(){alert('捕捉');},true);
	test1.attachEvent('onclick',function(){alert('冒泡');},false);
}else{
	test1.addEventListener('click',function(){alert('捕捉');},true);
	test1.addEventListener('click',function(){alert('冒泡');},false);
}

对IE模型的事件写法，适用于IE6，7，8
IE的事件模型相比W3C的标准事件，主要有三点不同：

1.绑定的事件函数不一样，IE中用attachEvent();删除用detachEvent();

2.事件必须要加on, 比如：标准中第一个参数为click，IE中要写onclick

3.IE6，7，8中先绑定的事件后发生;

4.this指向问题：w3c中this指向被绑定的对象本身，而在IE中，this指向window,这一点比较麻烦，好在js能够弥补。

5.事件对象不一样，w3c中，事件对象被系统自动传递给事件函数的第一个参数，而在IE中，事件对象是window.event的属性值。不过现在IE6，7，8已经支持自动传入event的对象。

兼容两者区别

高级事件编程：通过自定义函数来解决以上问题。

<script type="text/javascript">
/*参数解释：
  obj:待绑定的事件对象
  type：事件类型，click，mouseover，change等
  event：事件函数
  model：true/false 捕捉/冒泡
*/

function addEvent(obj,type,event,model){
	//将IE绑定的事件塞入数组中，通过数组来执行函数
	if (!obj[('__'+type)]) {//判断obj的自定义属性是否存在
		obj[('__'+type)] = [];//如不存在，则创建并赋值为空数组
	}

	obj[('__'+type)].push(event);

	if (!obj['on'+type]) {
		//将其赋给一个自定义的函数
		obj['on'+type] = function(){
			var len = obj[('__'+type)].length;
			for (var i = 0; i < len; i++) {
				//通过数组一次调用函数
				obj[('__'+type)][i].apply(obj);
			}
		}
	}


	/* 另外一种方式：
	if (obj.attachEvent) {
		//此处建议判断参数的合法性
		obj.attachEvent('on'+type,event,model);
	}
	else{
		obj.addEventListener(type,event,model);
	}*/
}

window.onload = initAll;
function initAll(){
	var obj = document.getElementById('test1')
	function jump(){
		alert('自定义添加事件函数 '+this);
	}
	function jump2(){
		alert('自定义添加事件函数2 '+this);
	}
	addEvent(obj,'click',jump,false);
	addEvent(obj,'click',jump2,false);
}
</script>
<input type="button" id="test1" value="点我">

思考：
1.如何自定义的函数还能解除绑定。
2.如何给event的事件传多个参数。

//注册
function addEventHandler(element, evtName, callback, useCapture) { 
   //DOM标准
    if (element.addEventListener){ 
          element.addEventListener(evtName, callback, useCapture); 
    }else {
       //IE方式,忽略useCapture参数
       element.attachEvent('on' + evtName, callback); 
    }
}

//移除注册
function removeEventHandler(element,evtName, callback, useCapture) { 
   //DOM标准
    if (element.removeEventListener){ 
          element.removeEventListener(evtName,callback, useCapture); 
    }else {
       //IE方式,忽略useCapture参数
       element.dettachEvent('on' + evtName, callback); 
    }
}