资讯专栏INFORMATION COLUMN

20170808 - 跨浏览器的事件兼容处理程序

1treeS / 1823人阅读

摘要:第三个参数表示在冒泡阶段调用事件处理程序,默认值为中的事件对象事件处理程序当前程序绑定的那个元素事件处理程序内部,的值始终等于的值事件发生的具体元素事件类型取消事件的默认行为取消事件的进一步捕获或冒泡中的事件对象事件类型阻止事件进一步冒泡取

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      // 第三个参数表示在冒泡阶段调用事件处理程序,默认值为false
      element.addEventListener(type, handler, false)
    }else if(element.attachEvent){
      element.attachEvent("on"+type, handler)
    }else {
      element["on"+type] = handler
    }
  },
  removeHandler: function(element, type, handler){
    if(element.removeHandler){
      element.removeHandler(type, handler, false)
    }else if(element.detachEvent){
      element.detachEvent("on"+type, handler)
    }else {
      element["on"+ type] = null
    }
  },
  getEvent: function(event){
    return event?event:window.event
  },
  getTarget: function(event){
    return event.target || event.srcElement
  },
  preventDefault: function(event){
    if(event.preventDefault){
      event.preventDefault()
    }else {
      event.returnValue = false
    }
  },
  stopPropagation: function(){
    if(event.stopPropagation){
      event.stopPropagation()
    }else {
      event.cancelBubble = true
    }
  }
}

// DOM中的事件对象
function DOMEvent(event){
  // 事件处理程序(当前程序)绑定的那个元素,事件处理程序内部,this的值始终等于currentTarget的值
  event.currentTarget
  // 事件发生的具体元素
  event.target
  // 事件类型
  event.type
  // 取消事件的默认行为
  event.preventDefault()
  // 取消事件的进一步捕获或冒泡
  event.stopPropagation()
}

// IE中的事件对象
function IEEvent(){
  var event = window.event
  // 事件类型
  event.type
  // 阻止事件进一步冒泡
  event.cancelBubble = true
  // 取消事件的默认行为
  event.returnValue = false
  // 事件发生的具体元素
  event.srcElement
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84765.html

相关文章

  • 20170808- css 居中

    摘要:拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它注意上面的例子中必须为元素设置宽度,并且宽度必须小于父容器的宽度绝对定位实现垂直居中或者自身高度的一半 水平居中 行内或类行内元素水平居中 在块级父容器中设置text-align:center 块级元素水平居中 块级元素设置margin-left和margin-right为auto(前提是已经为元素设置了width) fl...

    Dongjie_Liu 评论0 收藏0
  • JS高级程序设计笔记——事件(一)

    摘要:但是通过添加的匿名函数无法移除,最好是在其他地方定义事件处理程序的函数,然后将该函数的名称传给第二个参数。一中的事件对象对象兼容级和级的浏览器将对象传入到事件处理程序中。 一、事件流 假设有如下HTML代码: Event Click me 其DOM树如下图所示:showImg(https://segmentfault.com/img/bVUUWA?w=50...

    guqiu 评论0 收藏0
  • 览器事件处理程序实现总结

    摘要:本文章需要一些前置知识事件基础知识对象详解围绕着如何更好地实现一个跨浏览器的事件处理小型库展开讨论。处理垃圾回收过滤触发或删除一些处理程序解绑特定类型的所有事件克隆事件处理程序依照这样的一个思路,我们来一步步实现这样一个模块。 本文章需要一些前置知识 事件基础知识 event对象详解 围绕着如何更好地实现一个跨浏览器的事件处理小型库展开讨论。 1. 初步实现 在《JavaScrip...

    CHENGKANG 评论0 收藏0
  • javaScript览器事件处理程序

    摘要:在事件处理,事件对象,阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中最好编写成一个通用的事件处理工具。上面的中事件的执行都发生了目标阶段事件对象的属性用来表示事件处理发生在事件流哪个阶段。 最近在阅读javascript高级程序设计,事件这一块还是有很多东西要学的,就把一些思考和总结记录下。在事件处理,事件对象,阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中...

    terasum 评论0 收藏0
  • 前端事件绑定知识点(面试常考)

    摘要:事件通常与函数配合使用,当事件发生时函数才会执行。的事件流是事件捕获流,事件由根元素获取并沿树向下分发。通过添加事件,只能用删除此事件。这主要得益于浏览器的事件冒泡机制。 简介 事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 事件通常与函数配合使用,当事件发生时函数才会执行。 执行JS 事件的方式: ...

    liujs 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<