javascript中event汇总

简介: 原文:javascript中event汇总ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处引用的是javascript中的event兼容处理代码。
原文: javascript中event汇总

ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处引用的是javascript中的event兼容处理代码。

var EventUtil = {//在这里我们用一个对象来将对event的各种兼容处理封装起来
//首先是对绑定事件的兼容
    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级处理方法(可选,仅支持DOM0级的浏览器似乎已经不存在了)
            element["on" + type] = handler;
        }
    },
    //鼠标按钮的兼容处理
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){//首先检查是否是DOM标准
            return event.button;
        } else {
     //对IE向DOM兼容
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4: return 1;
            }
        }
    },
    //获取字符编码
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {//IE8之前和opera 需要使用keyCode获取字符编码
            return event.keyCode;
        }
    },
    //剪切板的访问
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //得到事件对象
    getEvent: function(event){
        return event ? event : window.event;
    },
    //得到相关元素
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }

    },
    //得到事件目标
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //对滑轮事件进行兼容
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    //阻止默认事件
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    //移除事件
    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;
        }
    },
    //设置剪切板内容
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    //阻止事件冒泡
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

此处添加的事件尚不完全,有待扩充。这里引用的是《javascript高级程序设计》中的实例。

目录
相关文章
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
269 1
|
消息中间件 存储 前端开发
JavaScript高级主题:解释一下 JavaScript 中的事件循环(Event Loop)。
JavaScript高级主题:解释一下 JavaScript 中的事件循环(Event Loop)。
147 0
|
JavaScript
Vue.js 中的 $v 和 $event 代表什么?
Vue.js 中的 $v 和 $event 代表什么?
|
JavaScript 前端开发 API
(译)看得见的 JavaScript:事件循环(Event Loop)
(译)看得见的 JavaScript:事件循环(Event Loop)
173 1
|
存储 移动开发 JavaScript
JS中的事件学习event
JS中的事件学习event
189 0
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
197 0
|
存储 JavaScript 前端开发
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
了解JavaScript的事件循环和任务队列对于处理异步任务至关重要。事件循环由主线程和任务队列组成,当主线程执行完同步任务后,会检查任务队列,按顺序执行宏任务和微任务。宏任务包括`setTimeout`等,微任务如`Promise`的回调。在实际开发中,事件循环保证了代码的非阻塞执行,提高了用户体验。例如,`setTimeout`的回调会在当前宏任务结束后,所有微任务执行完才会执行。理解这一机制对于解决面试中的异步问题非常有帮助。
261 0
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
|
JavaScript 前端开发
js开发:请解释什么是事件委托(event delegation),并给出一个示例。
事件委托是JavaScript中优化事件处理的技术,通过绑定事件处理器到共享的父元素,利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件,然后通过`event.target`识别触发事件的具体子元素(如`&lt;li&gt;`),实现对动态生成列表项的点击事件处理。
132 1
|
前端开发 JavaScript
深入理解JavaScript的事件循环(Event Loop)
深入理解JavaScript的事件循环(Event Loop)
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
【4月更文挑战第14天】JavaScript中的事件处理包括冒泡和捕获两个阶段。事件冒泡是从根节点向目标元素逐级向上传播事件,允许在元素内部捕获外部事件。事件捕获则相反,从根节点向下到目标元素,使得外部能捕获内部事件。`addEventListener`方法用于添加事件监听器,通过`useCapture`参数切换冒泡或捕获阶段处理事件,默认为`false`(冒泡阶段)。兼容性考虑,推荐使用`addEventListener`。
90 0

热门文章

最新文章