原生JavaScript事件处理程序汇总

timger 发布于2019-08-26 12:11 / 1476人阅读

摘要：事件处理程序添加事件获取事件对象引用获取事件的目标取消给定事件默认行为级，中删除事件停止事件冒泡获取相关元素获取鼠标按钮信息获取鼠标滚轮增量值的方法获取键吐槽下的语法目前不支持页面锚点定位事件处理程序添加事件级事件处理程序事件处理程序级事件

事件处理程序

添加事件

获取事件对象引用

获取事件的目标

取消给定事件默认行为 DOM0级，IE中

删除事件

停止事件冒泡

获取相关元素

获取鼠标按钮信息

获取鼠标滚轮增量值（delta）的方法

获取键

吐槽下segmentfault的markdown语法目前不支持页面锚点定位

事件处理程序 添加事件

var EventUtil = {
    addEvent: function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false);//DOM2级事件处理程序
        }else if(element.attachEvent){
            element.attach("on" + type, handler);//IE事件处理程序
        }else{
            element["on" + type] = handler;//DOM0级事件处理程序
        }
    },

获取事件对象引用

    getEvent: function(event){
        //return event || window.event;
        return event ? event : window.event;
    },

获取事件的目标

    getTarget: function(event){
        return event.target || event.srcElement;
    },

取消给定事件默认行为 DOM0级，IE中

    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

删除事件

    removeEvent: 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;
        }
    },

停止事件冒泡

    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },

获取相关元素

这个属性只对于mouseover和mouseout事件才包含值；
对于其他事件，这个属性值是null;

    getRelatedTarget: function(e){
        if(e.relatedTarget){
            return e.relatedTarget;
        } else if(e.toElement){
            return e.toElement;
        } else if(e.fromElement){
            return e.fromElement;
        } else {
            return null;
        }
    },

获取鼠标按钮信息

{ 0:主鼠标按钮，1：中间的鼠标按钮（滚轮按钮），2：次鼠标按钮}

    getMouseButton: function(event){
        if(document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            // IE8及之前版本的button属性，转换为DOM版鼠标事件的button属性
            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;
            }
        }
    },

获取鼠标滚轮增量值（delta）的方法

    getWheelDelta: function(event){
        if(event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5) ?
                -event.wheelDelta : event.wheelDelta;
        } else {
            return -event.detail * 40;
        }
    },

获取键

    getCharCode: function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    }

发表在掘金的链接

云服务器 GPU云服务器原生javascript事件事件处理程序 js事件处理程序 js原生dom事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108204.html

前端实习面试汇总

摘要：题目来源前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助最后一个参数是做什么用的答规定事件是冒泡还是捕获。最近一直在多看基础的书多码代码准备找实习，在网上也搜罗了不少面经，现在把搜罗到的实习生面试题自己整理一下。题目来源：前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录...

张利勇 2019-08-29 11:17 评论0 收藏0
前端实习面试汇总

摘要：题目来源前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助最后一个参数是做什么用的答规定事件是冒泡还是捕获。最近一直在多看基础的书多码代码准备找实习，在网上也搜罗了不少面经，现在把搜罗到的实习生面试题自己整理一下。题目来源：前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录...

wangzy2019 2019-08-01 15:43 评论0 收藏0
前端实习面试汇总

摘要：题目来源前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助最后一个参数是做什么用的答规定事件是冒泡还是捕获。最近一直在多看基础的书多码代码准备找实习，在网上也搜罗了不少面经，现在把搜罗到的实习生面试题自己整理一下。题目来源：前端实习生面试总结最近开始了几次面试，虽然还不知道结果如何，但是还是要记录...

NicolasHe 2019-08-22 10:37 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0