事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。

为事件指定处理程序的方式有好几种：

• HTML 事件处理程序
• DOM0 级事件处理程序
• DOM2 级事件处理程序
• IE 事件处理程序
• 跨浏览器的事件处理程序

HTML 事件处理程序

<div onclick="alert(event.type)"></div>

DOM0 级事件处理程序

<div id="box"></div>

const box = document.querySelector('#box');
box.onclick = function() {
  this.innerHTML += '1';
};

DOM2 级事件处理程序

element.addEventListener(eventType, handler, useCapture);

参数传递：

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
  box.addEventListener(
    'click',
    function() {
      test('123');
    },
    false
  );
  function test(x) {
    box.innerHTML += x;
  }
</script>

IE 事件处理程序

IE 事件模型共有两个过程：

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

事件绑定：attachEvent(eventType, handler);

事件移除：detachEvent(evnetType, handler);

参数说明：

• eventType：指定事件类型
• handler：事件处理函数

// Example
cont btn = document.getElmentById('.btn');
btn.attachEvent('onclick', showMessage);
btn.detachEvent('onclick', showMessage);