javascript 兼容各个浏览器的事件

调用事件:

事件对象
什么是事件对象?在触发dom上的事件是都会产生一个事件对象event。例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的
dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为
IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件冒泡  设置为true是表示阻止 false表示不阻止
returnValue  属性 用于阻止事件的默认行为 设置为false的时候表示阻止

代码如下:

// 兼容各个浏览器  跨浏览器事件处理------- 统一进行封装
var EventHandle = {
    // element : 元素 , type: 点击事件 ,handle : 实行的方法
    //添加句柄
    addEventHandle: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);//---false  //代表冒泡 dom2级
        }
        else if (element.attachEvent) {
            element.attachEvent("on"+type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    //删除句柄  事件处理不起作用
    removeEventHandle: function (element, type, handler) {
        if (element.removeEventListener) {   // 支持dom2级的事件处理  type是 onclick
            element.removeEventListener(type, handler, false); //---false  //代表冒泡
        }
        else if (element.detachEvent) {
            element.detachEvent("on"+type, handler);  //支持IE 
        } else {
            element["on" + type] = null;// dom0级事件处理   传统的点击事件
        }
    },
    //获取事件对象 兼容浏览器的所有对象
    getEvent: function (event) {
        return event ? event : window.event;  //在IE浏览器的低版本中需要的是window.event
    },
    //获取事件类型  是点击呢还是鼠标移动
    getType:function(event){
        return event.type;
    },
    //获取当前的那个元素
    getElement: function (event) {
        return event.target || event.srcElement;
    },
    //阻止事件的默认行为
        : function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    //阻止事件冒泡
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    }
}

(0)

相关推荐

  • 纯JavaScript实现的兼容各浏览器的添加和移除事件封装

    //事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,fa

  • javascript浏览器兼容教程之事件处理

    1. window.event [分析说明]先看一段代码 复制代码 代码如下: function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行. 因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口. [兼容处理]添加对event判断,根据浏览器的不同来得到正确的ev

  • JS事件添加和移出的兼容写法示例

    本文实例讲述了JS事件添加和移出的兼容写法.分享给大家供大家参考,具体如下: var EventUtil = { addHandler : function (element , type, handler { if ( element.addEventListener){ element.addEventListener(type, handler, false); }else if ( element.attachEvent) { element.attachEvent("on"+

  • js获取键盘按键响应事件(兼容各浏览器)

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==27){ // 按 Esc //要做的

  • 原生JS绑定滑轮滚动事件兼容常见浏览器

    滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a

  • javaScript事件机制兼容【详细整理】

    [添加事件机制]  addEventListener  和  attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false )  //W3C规范添加事件(IE8及以上不兼容):  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}

  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器

    复制代码 代码如下: <script> // 兼容FF document.onkeydown=keyListener; function keyListener(e){ e = e ? e : event; if(e.keyCode == 13){ onsubmit(); } } </script>

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

  • javascript 按键事件(兼容各浏览器)

    第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

  • 兼容各大浏览器的JavaScript阻止事件冒泡代码

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr

随机推荐