事件辨析

事件

HTML事件处理程序

即通过与事件处理程序同名的HTML特性来实现.
<input type="button" onclick="alert('HTML')">

• 有权访问全局作用域中任意代码.
• this值为事件的目标元素.
• 作用域扩展至document以及本元素本身,即相当于with(this).
• 如果当前元素是一个表单输入元素,作用域扩展至整个表单元素,即相当于with(this.form).
• 生成event对象,不必自己定义,亦不必从函数参数列表中获取.
• 存在时差问题,当HTML加载时,对应的JavaScript可能没有加载.
• 前述提到的作用域扩展在浏览器间行为并不一致.
• 可以通过设置当前元素DOM的对应事件处理属性为null的方式销毁事件.
• 显然应该在事件到达元素本身的时候处理.

  DOM0级事件处理程序

  DOM0指第四代浏览器(IE4.0, Netscape4.0)最初支持的DOM规则,并不是事实存在的标准.
  将一个函数赋值给一个事件处理程序属性,首先必须取得一个要操作对象的引用.
  let btn = document.getElementById('btn'); btn.onclick = () => { alert('DOM0'); }
• 简单,跨浏览器兼容.
• this引用当前元素.
• 在冒泡阶段被处理
• 销毁时设置对应属性为null btn.onclick = null;

  DOM2级事件处理程序

  addEventListener removeEventListener
  接受三个参数,要处理的事件名,事件处理函数,布尔值(true,捕获阶段处理事件;false,冒泡阶段处理事件)
• this引用当前元素
• 按顺序添加的事件按顺序执行
• addEventListener添加的事件只能由removeEventListener移除,移除时需参数相同,这意味着匿名事件处理函数将无法移除.
• 捕获浏览器兼容性较差