本文共 1461 字，大约阅读时间需要 4 分钟。

事件详解

注册/移除事件的三种方式

var box = document.getElementById('box');box.onclick = function () {
      console.log('点击后执行');};box.onclick = null;box.addEventListener('click', eventCode, false);box.removeEventListener('click', eventCode, false);box.attachEvent('onclick', eventCode);box.detachEvent('onclick', eventCode);function eventCode() {
      console.log('点击后执行');}

兼容代码

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;  }}

事件的三个阶段

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

   事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

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

案例

• 跟着鼠标飞的天使
  • 基本版本

• 最终版本

• 鼠标点哪图片飞到哪里
• 获取鼠标在div内的坐标

阻止事件传播的方式

• 标准方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

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

转载地址：http://jixmi.baihongyu.com/