DOM 0级事件与DOM 2级事件

1 DOM 0级事件

1.1 绑定事件

• 1 在标签上直接绑定事件

// 添加事件方式1
<input id='input' type="text" onclick="alert('我是第一个事件')" />

• 2 通过JavaScript绑定事件

<script>
// 添加事件方式2
document.getElementById('input').onclick = function() {
    alert('我是第二个事件')
}
</script>

1.2 删除事件

document.getElementById('input').onclick = null;

说明

• 1 元素可绑定多种事件（如 click mouseover...）

2 DOM 2级事件

2.1 绑定事件

el.addEventListener(eventName,function[,boolean])

eventName => 事件名称

function => 事件处理函数/事件句柄

boolean => true | false true为事件捕获，false为事件冒泡

示例

<input id='input' type="text" />
<script>
  document.getElementById('input').addEventListener('click', function () {
    alert('mmm')
  }, true)
  document.getElementById('input').addEventListener('click', function () {
    alert('ooooo')
  }, true)
  document.getElementById('input').addEventListener('click', function () {
    alert('pppp')
  }, false)

  // 兼容低版本IE的写法
  document.getElementById('input').attachEvent("onclick", function () {
    alert('pppp')
  });
</script>

2.2 移除事件

El.removeEventLister(eventName,function[,boolean])

eventName => 事件名称

function => 事件处理函数/事件句柄

boolean => true | false true为事件捕获，false为事件冒泡