Javascript之浏览器兼容EventUtil

var EventUtil = {    //添加事件处理程序
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);            //DOM2中定义的事件处理程序,IE9,Firefox,Safaei,Chrome和Opera支持此方法。
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);            //在IE中attachEvent()方法是在全局作用域中运行的,也就是this等于window。而且如果给一个事件添加了多个处理程序,其执行顺序是逆序的。
        } else {
            element["on" + type] = handler;            //DOM0级方法,其只对每个事件只支持一个事件处理程序。
        }
    },    //移除事件处理程序
    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;            //DOM0级方法
        }
    },
    //获取事件对象
    getEvent: function (event) {
        return event ? event : window.event;        //在兼容DOM的浏览器中,event是简单的传入和返回;在IE中,event是未定义的(undefined),而是一个window对象属性。
    },    //获取事件目标
    getTarget: function (event) {
        return event.target || event.srcElement;    //IE中的事件目标属性是srcElement。
    },    //取消事件的默认行为    //只有在cancelable属性为true时,才可以取消事件的默认行为。
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;         //IE中的事件对象有returnValue属性,默认为true,设置为false可以取消默认行为。
        }
    },    //取消事件的捕获或者冒泡
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();            //可以用来取消事件捕获和冒泡。
        } else {
            event.cancelBubbles = true;            //兼容IE,只可以取消事件冒泡。
        }
    },
    getRelatedTarget: function (event) {
        if (event.relatedTarger) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else { return null; }

    }

}
时间: 2024-07-31 15:04:16

Javascript之浏览器兼容EventUtil的相关文章

JavaScript中浏览器兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 // 老版本浏览器

Javascript常见浏览器兼容问题

常见浏览器原生javascript兼容性问题主要分为以下几类: 一.Dom 1.获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以Id来获取元素; document.getElementsByTagName(“tag”)[0]以标签名来获取元素.另外IE不支持document.getElementsByClassName("class"); 2.获取Form表单元素 只兼容IE:document.formname.it

JavaScript初学者建议:不要去管浏览器兼容

如果可以回到过去的话,我会告诉自己这句话:"初学JavaScript的时候无视DOM和BOM的兼容性" 我初学时的处境 在我初学JavaScript的时候最头痛的就是浏览器兼容问题.在Firefox下面好好的代码放到IE就不能显示了,又或者是在IE能正常显示的代码在firefox又报错了. 前端开发工程师的职责就包括跨浏览器开发.所以我就在还不了解JS这门语言本身的时候去花时间学习浏览器兼容知识,这样会让JS学习难度增加.但是不能兼容主流浏览器的代码不能用在实际项目中. DOM和BOM

Javascript不同浏览器差异及兼容方法

原文链接:http://caibaojian.com/js-ie-different-from-firefox.html javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能够帮助你更快的解决问题,提高代码的使用质量,编写更优秀的javascript代码. 1.window.event 表示当前的时间对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 2.获取事件源 IE用srcElement获取事件源,而FF用target获取事件源 以上两个兼容通常会

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

【转】Web前端浏览器兼容初探

原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用

JavaScript判断浏览器类型及版本

说明:以下内容参考了一些网上资料以及同事间的一些讨论. 浏览器对于我们来说,可能是最熟悉的工具了.记得最早那会Netscape,到后来的Internet Explorer一统江湖,再到现在的FireFox大行其道,浏览器市场的争夺,可谓是硝烟弥漫.除了我们常见的IE, Firefox, Opera, Safari四大金刚以外,新近又出了一位Chrome,虽然新出,但是出于Google这个名门,Chrome所受到的关注绝不亚于先前的四大金刚,看来以后要改为5朵金花了,呵呵.除了这些熟知的浏览器以外

ie浏览器兼容问题小结

一,如何解决IE7和IE8的BUG 微软在IE8提供三种解析页面的模式 IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定 IE7 Standards Modes :IE7现在用的解析网页的模式,开起机关是在<head>中加入 <meta http-equiv="X-UA-Compatible" content="IE=7"> Quirks Modes :IE5用的解析网页的模式,开起机关是删除HTML顶部的D

js在浏览器兼容教程:事件处理

如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,主要的JavaScript的事件模型有三种(参考<Supporting Three Event Models at Once>),它们分别是NN4.IE4+和W3C/Safar. 1. window.event [分析说明]先看一段代码 function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行