事件模型

事件模型

事件模型分为dom0事件模型、dom2 事件模型和 IE 事件模型三种

事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

dom0事件模型（原始事件模型）

在该模型中，事件不会传播（没有事件流的概念），也就是事件一旦发生便会立即处理。

事件的绑定与取消

1、html代码中直接绑定

<button onclick="func()">点我</button>

2、js 代码指定属性值

var btn = document.getElementById('.btn');
btn.onclick = fun;

3、移除事件监听

btn.onclick = null;

优点

所有浏览器都兼容

缺点

• 相同事件的监听函数只能绑定一个，后面绑定的会覆盖前面的
• 没有事件冒泡、委托等

IE事件模型

IE事件模型分为两个阶段

• 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有，则执行

绑定事件和取消事件

// 绑定事件
attachEvent(type, handler)
//移除事件
detachEvent(type, handler)

dom2事件模型（w3c）

该事件模型分为桑阶段

• 事件捕获阶段：事件从document 一直向下传播到目标元素，一次检查经过的节点是否有事件监听函数，如果有，则触发
• 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到 document ，依次检查经过的节点是否绑定事件监听函数

绑定事件和取消事件

// 绑定事件
addEventListener(type, handler, useCapture);

// 移除事件
removeEventListener(type, handler, useCapture);
//useCapture用于指定是否在捕获阶段进行处理，一般为 false，与IE保持一致

事件对象

当一个事件被触发时，会创建一个对象，这个对象包含了与该事件相关的属性或方法。另外对象会作为第一个参数传递给监听函数

dom事件模型常用属性

• type：用于获取事件类型
• target：获取事件目标
• stopPropagation()阻止事件冒泡
• preventDefault()阻止事件默认行为

IE事件模型常用的书信

• type用于获取事件类型

• srcElement获取事件目标

• cancelBubble阻止事件冒泡

• returnValue阻止事件默认行为

事件委托（代理）

事件在冒泡的过程中会上传到父节点，所以可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式就叫做事件代理。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<script>
  var ul = document.getElementsByTagName('ul')[0];

  ul.onclick = function(e) {
    console.log(e.target.innerHTML);
  }
</script>

封装一个事件侦听器函数

const EventUtils = {
  // 添加事件
  addEvent: function (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },

  // 移除事件
  removeEvent: function (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },

  // 获取事件目标
  getTarget: function (event) {
    return event.target || event.srcElement;
  },

  // 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event
  getEvent: function (event) {
    return event || window.event;
  },

  // 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },

  // 取消事件的默认行为
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
};