事件

事件

1. 绑定

• ele.onxxxx = function (event) {}：兼容性好，但是一个元素的同一个事件上只能绑定一个处理函数

  ​ 基本等同于写在HTML行间上

• obj.addEventListener(type, fn, false)：IE9 以下不兼容，可以为多个事件绑定多个处理程序

• obj.attachEvent('on'+type, fn)：IE 独有，一个事件同样可以绑定多个事件处理程序

2. this 指向

• ele.onxxxx = function (event) {}：程序 this 指向的是 dom 元素本身

• obj.addEventListener(type, fn, false)：程序 this 指向是 dom 元素本身

• obj.attachEvent('on'+type, fn)：程序 this 指向 window

• 封装兼容性的 addEvent(elem, type, handle) 方法

function addEvent(elem, type, handle) {
	​if(elem.addEventListener) {
		elem.addEventListener(type, handle, false);
	} else if (elem.attachEvent) {
		elem.attachEvent('on' + type, function () {
			handle.call(elem);
		})
	} else {
		elem['on' + type] = handle;
	}
}

3. 解除事件处理程序

• ele.onclick = false / null;
• ele.removeEventListener(type, fn, false);
• ele.detachEvent('on' + type, fn);
• 注：若绑定匿名函数，则无法清除
• 举个栗子

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click', test, false);
function test () {
	console.log('test');
}
div.removeEventListener('click', test, false);

事件处理模型

1. 事件冒泡

• 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

2. 事件捕获

• 结构上（非视觉上）嵌套关系的元素会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
• IE 没有事件捕获

3. 触发顺序

• 先捕获，后冒泡

4. 不冒泡的事件

• focus
• blur
• change
• submit
• reset
• select
• …

5. 取消事件冒泡

• W3C 标准 event.stopPropagation();，不支持 IE9 以下的版本
• IE 独有 event.cancelBubble = true;
• 封装取消冒泡的函数 stopBubble(event)

function stopBubble(event) {
	if(event.stopPropagation) {
		event.stopPropagation();
	} else {
		event.cancelBubble = true;
	}
}

6. 阻止默认事件

• 默认事件 —— 表单提交，a 标签跳转，右键菜单等
  1. return false; 以对象属性的方式注册的事件才生效
  2. event.preventDefault(); W3C 标准，IE9 以下不兼容
  3. event.returnValue = false; 兼容 IE
  4. 封装阻止默认事件的函数 cancelHandler(event)

function cancelHandler(event) {
	if(event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue = false;
	}
}

事件对象

• event || window.event

1. 事件源对象

• event.target：火狐只有这个
• event.srcElement：IE只有这个
• chrome 都有

2. 兼容性写法

var target = e.target || e.srcElement;

事件委托

• 利用事件冒泡和事件源对象进行处理
• 优点：
  1. 性能：不需要循环所有的元素，给每一个元素绑定事件
  2. 灵活：当有新的子元素时，不需要重新绑定事件

事件分类

1. 鼠标事件

• click
• mousedown
• moousemove
• mouseup
• contextmenu：右键产生菜单事件
• mouseover
• mouseout
• mouseenter：h5新规范
• mouseleave：h5新规范

2. 键盘事件

• keydown、keyup、keypress
• keydown > keypress > keyup
• keydown 和 keypress 的区别
  1. keydown 可以响应任意键盘按键，keypress 只能响应字符类键盘按键
  2. keypress 返回 ASCII 码，可以转换为相应的字符

3. 文本操作事件

• input
• focu
• blur
• change

4. 窗体操作类（window上的事件）

• scroll
• load