美文网首页
跨浏览器的事件处理

跨浏览器的事件处理

作者: 自律财富自由 | 来源:发表于2018-11-08 14:19 被阅读0次

原文

var EventUtil = {
        // 添加侦听事件
        addEventListener:function (element, type, handler) {
            // IE9+、Firefox、Safari、chrome和Opera
            if(element.addEventListener) {
                element.addEventListener(type, handler, false);
            }
            // IE8-
            else if(element.attachEvent) {
                element.attachEvent("on" + type, handler);
            }
        },
        
        // 移除侦听事件
        removeEventListener:function (element, type, handler) {
            // IE9+、Firefox、Safari、chrome和Opera
            if(element.addEventListener) {
                element.removeEventListener(type, handler, false);
            }
            // IE8-
            else if(element.attachEvent) {
                element.detachEvent("on" + type, handler);
            }
        },
        
        // 获取事件对象
        getEvent:function(event) {
            if(typeof event == "undefined") {
                event = window.event; // IE浏览器
            }
            return event;
        },
        
        // 获取触发事件的元素
        getTarget:function(event){
            if(typeof event.srcElement == "undefined") {
                return event.target;
            }else {
                return event.srcElement; // IE浏览器
            }
        },
        
        // 获取事件类型
        getType:function(event) {
            return event.type;
        },
        
        // 获取按键键码
        getCharCode:function(event) {
            if(typeof event.keyCode == "number") {
                return event.keyCode; // IE8-、Firefox和opera
            }else {
                return event.charCode; 
            }
        },
        
        // 获取鼠标相对于文档的位置,即页面坐标位置
        getPagePosition:function(event) {
            var pageX = event.pageX,
                pageY = event.pageY;
            if(pageX == undefined) {
                pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
            }
            if(pageY == undefined) {
                pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            }
            return {
                pageX:pageX,
                pageY:pageY
            };
        },
        
        // 阻止事件的默认行为
        preventDefault:function(event) {
            if(event.preventDefault){
                event.preventDefault();
            }else {
                event.returnValue = false; // IE浏览器
            }
        },
        
        // 阻止事件冒泡
        stopPropagation:function(event) {
            if(typeof event.cancelBubble == "undefined") {
                event.stopPropagation();
            }else {
                event.cancelBubble = true; // IE浏览器
            }
        }
    };

相关文章

  • javascript 之事件处理函数和事件对象

    本文主要谈及问题: 关于编写跨浏览器的事件处理函数和事件对象 关于编写跨浏览器的事件处理函数和事件对象 为什么要编...

  • JS 事件

    目录 事件流 事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...

  • JavaScript-高级篇之事件

    什么是事件 掌握事件流 掌握DOM事件流与IE事件处理程序 掌握跨浏览器的事件处理程序 掌握event对象的常用属...

  • JavaScript事件02——事件处理程序

    大纲:概念(事件处理程序)事件处理程序(HTML事件,DOM0级,DOM2级,IE事件,跨浏览器) 一、概念: 1...

  • JavaScript 经典实例收集整理

    跨浏览器添加事件 跨浏览器移除事件 跨浏览器阻止默认行为 跨浏览器获取目标对象 跨浏览器获取滚动条位置 跨浏览器获...

  • 跨浏览器的事件兼容

    我们都知道,在不同的浏览器下,添加和移除事件处理程序方式有所相同,要想写出跨浏览器的事件处理程序,首先我们要了解不...

  • 浏览器兼容

    前面内容我们可以看到,在不同的浏览器下,添加和移除事件处理程序方式不相同,要想写出跨浏览器的事件处理程序,首先我们...

  • Javascript事件小结

    本篇文章主要讲解Javascript的事件,如下: 事件流 如何注册和删除事件 跨浏览器的事件处理程序和事件对象 ...

  • 你知道页面上常见的事件类型吗

    我们常用的事件类型有UI事件,焦点事件,鼠标事件,滚轮事件,键盘事件和文本事件,用了跨浏览器添加事件处理程序的方法...

  • 十九

    跨浏览器的事件处理程序要保证处理事件的代码能在大多数浏览器下一致地运行,只需关注冒泡阶段。 这两个方法首先都会检测...

网友评论

      本文标题:跨浏览器的事件处理

      本文链接:https://www.haomeiwen.com/subject/jhlwxqtx.html