元素的事件

1、为元素添加或移除事件的方式

var box = document.getElementById('box');

• 方式一

//	添加事件
box.onclick = function () {
  console.log('点击后执行');
};
//	移除事件
box.onclick = null;

• 方式二

//	添加事件,eventFn为事件处理函数
box.addEventListener('click', eventFn, false);

//	移除事件,eventFn为事件处理函数
box.removeEventListener('click', eventFn, false);

• 方式三

//	添加事件,eventFn为事件处理函数
box.attachEvent('onclick', eventFn);

//	移除事件,eventFn为事件处理函数
box.detachEvent('onclick', eventFn);

由于浏览器的不同，以下是兼容代码：

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on' + type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

2、事件的三个阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段
  事件对象.eventPhase属性可以查看事件触发时所处的阶段

3、事件对象

//事件对象的属性和方法

event.type 获取事件类型
clientX/clientY     所有浏览器都支持，窗口位置
pageX/pageY       IE8以前不支持，页面位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为

//阻止事件传播的方式
标准方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 标准中已废弃

4、常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发