//封装函数
var eventUtil={
    //添加事件
    addHandler:function(element,type,handler){
        if(element.addEventListener){        //如果支持DOM2
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){        //如果支持IE
            element.attachEvent('on'+type,handler);
        }else{                                              //DOM0级
            element['on'+type]=handler;
        }
    }
    //删除事件
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(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;
    }

getType:function (event) {
        return event.type;
    }
    //获取事件目标
    getElement:function (event) {
        return event.target||event.srcElement;
    }
    //阻止默认行为
    preventDefault:function (event) {
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    }
    //阻止冒泡
    stopPropagation:function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble=true;
        }
    }

浏览器兼容——DOM事件封装函数的更多相关文章

  1. Example010实现浏览器兼容改内容的函数,自写

    <!-- 实例010实现浏览器兼容改内容的函数 --> <!DOCTYPE html> <html lang="en"> <head> ...

  2. JavaScript中DOM查询封装函数

    在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...

  3. js中浏览器兼容startsWith 、endsWith 函数

    在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...

  4. DOM事件-调用函数

    通过调用函数改变其内容: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> ...

  5. 关于UC浏览器兼容scroll事件问题

    经过本人查阅无数资料,最终得出一个比较简单,具有一定兼容性的结果. $(window).scroll(function( ) { var scrollTop = document.documentEl ...

  6. JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

    转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...

  7. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  8. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...

  9. 如何优雅的封装一个DOM事件库

    1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级 ...

随机推荐

  1. PhpStorm 10.0 激活方式

    随着 JetBrains 新版本的发布,注册机已然不行了.然而,道高一尺,魔高一丈.IntelliJ IDEA开源社区 提供了如下通用激活方法:注册时选择License server填写http:// ...

  2. 关于mysqli 连接数不能正确释放的解决方案

    /** * 析构函数 */ //解决重复链接的问题 private $db_handler = null; function __destruct() { Log::logWrite($this-&g ...

  3. A20 GPIO中断类型差别结果迥异的问题思考

    A20GPIO中断类型差别结果迥异的问题思考 最近在使用全志A20做开发时,发现在处理中断的时候,用电平触发模式,报中断比较乱,用边沿触发则很稳定,不会乱报.笔者感到比较困惑,笔者用电平触发写的cod ...

  4. Java中synchronized注意点

    之前一直以为 synchronized 加在方法前面就只有一个线程能访问了,项目中碰到一个问题,一个类的不同对象,同时访问加了 synchronized的方法 同样是可以访问的,那是因为 synchr ...

  5. Maven 添加Jetty

        <build>         <finalName>springmvc</finalName>         <plugins>       ...

  6. Struts 上下文

    Struts  上下文 ActionContext .ServletActionContext 是继承关系  ActionContext  ActionContext context = Action ...

  7. Android MediaPlayer Error -1004

    之前用Android自带的VideoView播放在线视频一直没问题的.今天突然碰到无法播放. MediaPalyer返回的错误代码是-1004,API文档上写的是:Bitstream is not c ...

  8. c++类的实例化,有没有new的区别

    A a; A * a = new a(); 以上两种方式皆可实现类的实例化,有new的区别在于: 1.前者在堆栈中分配内存,后者为动态内存分配,在一般应用中是没有什么区别的,但动态内存分配会使对象的可 ...

  9. 小猪猪逆袭成博士之C++基础篇(一)数据精度、强制类型转换、变量命名规则

    小猪猪逆袭成博士之C++基础篇(一) 关键词: 数据精度.强制类型转换.变量命名规则 综述: 1.大多数编程语言通过两种方式来进一步补充其特征:一是赋予程序员自定义数据类型的权利(C++中的类):二是 ...

  10. 删除链表的中间节点和a/b处节点

    [说明]: 本文是左程云老师所著的<程序员面试代码指南>第二章中“删除链表的中间节点和a/b处节点”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解析说 ...