JavaScript 事件1

绑定事件处理函数

1. // 只能绑定一个
div.onclick = function () {
	this.style.backgroundColor = 'red'; 
}
// 基本等同于写在行间样式上
<div onclick="alter('')"> </div> 

------------------------------------------------------------------------------

2. // IE8 no 
   // 可绑定多个
   // 填3个参数（事件类型, 处理函数, false）
div.addEventListener('click', function(){
	
}, false);

------------------------------------------------------------------------------

3. // IE 独有
   // 可绑定多个
   // 填2个参数（'on' + type, fn)
   // 较addEventlistener更为松散
obj.attachEvent('onclick', function () {});
 

事件处理程序的运行环境

1. ele.onxxx = function (event) {} // this --> dom
2. obj.addEventListener (type, fn, false); this --> dom
3. obj.attachEvent(‘on’ + type, fn); this --> window

// 封装兼容性 addEvent(ele, type, handle)方法 *
function addEvent(ele, type, handle) {
	if(ele.addEventListener) {
		ele.addEventListener(type, handle, false)
	}else if(ele.attachEvent) {
		ele.attachEvent('on' + type, function() {
			handle.call(ele);
		})
	}else{
		ele['on' + type] = handle;
	}
}

解除事件处理程序

ele.onclick = false/''/null;
ele.removeEventListener(type, test, false);
ele.detachEvent('on' + type, test);
// 若绑定匿名函数则无法解除。

事件处理模型-事件的冒泡、捕获 *

• 冒泡：结构上嵌套关系的元素，自子元素冒泡向父元素；
• 捕获：结构上嵌套关系的元素，自父元素捕获至子元素。 ele.addEventListener(‘click’, function() {}, true);
• // IE no
• 触发顺序，先捕获，后冒泡。
• focus, blur, change, submit, reset, select等事件不冒泡。
  

取消冒泡和阻止默认事件

• 取消冒泡：

1. W3C标准 event.stopPropagation(); IE8 no
2. IE event.cancelBubble = true;

// 封装取消冒泡的函数 stopBubble(event) {
	if(event.stopPropagation){
		event.stopPropagation();	
	}else{
		event.cancelBubble = true;
	}
}

• 阻止默认事件：
  默认事件-表单提交，a标签跳转，右键菜单等
  1. return false; 以对象属性的方式注册的事件才生效 //兼容性好、原始、以句柄的方式来阻止默认事件，所以只有以句柄的方式绑定的事件才ok addEventListener(), attachEvent() no
  2. event.preventDefault(); // W3C标准，IE8 no
  3. event.returnValue = false; 兼容IE

// 封装阻止默认事件的函数 cancelHandler(event);
function cancelHandle(event) {
	if(event.preventDefault) {
		event.preventDefault();
	}else{
		event.returnValue = false;
	}
}

阻止右键菜单

事件对象

• event || window.event 用于IE
• 事件源对象
  event.target firlfox只有这个
  event.srcElement IE只有这个
  chrome 都有

// 兼容性写法
var event = e || window.event;
var target = event.target || event.srcElement;