DOM0 DOM2添加事件

兼容性

      var EventUtil = {
        addHandler: 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
          }
        },
        removeHandler: function (element, type, hander) {
          if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
          } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler)
          } else {
            element["on" + type] = null
          }
        }
      }

DOM2级事件

addEventListener("click", function () {
  // .
}, false)

false: 冒泡
true: 捕获


removeEventListener("click", function () {
  //  .
}, false) // 不能是匿名函数

为同一个元素添加事件时,按照加载顺序依次进行。

IE:

 attachEvent("onclick", function () {
    // .
})
只支持冒泡
第一个参数使用onclick,

与DOM0区别: 作用于不用,DOM0下事件this指向所属元素,
attachEvent会在全局作用域中运行, this == window
与addEventListener区别: 可以为同一个元素添加多个事件处理程序,
但attachEvent是以相反的顺序被触发

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 580评论 1 3
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 642评论 0 2
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,121评论 1 6
  • 一、DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件 了解DOM0级事件之前,先了解下H...
    任少鹏阅读 260评论 0 1
  • DOM0级和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听:用JavaScript指定事件处理程序...
    LeeoZz阅读 388评论 0 1