JavaScript事件基础知识总结【思维导图】

2019-05-1311:30:39WEB前端开发Comments2,317 views字数 2165阅读模式

JavaScript事件基础知识总结【思维导图】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12385.html

var EventUtil = {
    //注册事件    addHandler: function(element, type, handler){
        if (){
            (type, handler, false);
        } elseif (){
            ("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
 
    //移除事件    removeHandler: function(element, type, handler){
        if (){
            (type, handler, false);
        } elseif (){
            ("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
 
    //获取事件
    getEvent: function(event){
        returnevent ? event : window.event;
    },
 
    //获取事件名称
    getTarget: function(event){
        returnevent.target || event.srcElement;
    },
    
    //获取鼠标键
    getButton: function(event){
        //DOM2中检测是否有MouseEvents模块if (("MouseEvents", "")){
            returnevent.button;
            // var k = ;
            //     switch(k){
            //         case 0:
            //             return "0:表示左键";
            //         case 1:
            //             return "1:表示中键";
            //         case 2:
            //             return "2:表示右键";
            //     }
            //IE6,7,8  左键:1,中键:4,右键:2;
            //Chrome,FF,IE9+   左键:0,中键:1,右键:2;
        } else {
            switch(event.button){   //IE下case0:
                case1:             //左键case3:             //左右键case5:             //左中键case7:             //左右中return0;       //左键case2:             //右键case6:             //右中return2;       //右键case4: return1;   //中键            }
        }
    },
    
    //获得按键编码值
    getCharCode: function(event){
        if (typeofevent.charCode == "number"){
            returnevent.charCode;
        } else {
            returnevent.keyCode;
        }
    },
    
    /*event对象的relatedTarget属性提供了相关元素的信息,这个属性只对于mouseover和mouseout事件才包含值;
    *对于其他事件,这个属性的值是null。
    *IE不支持relatedTarget属性,但提供了保存着同样信息的不同属性。
    *在mouseover事件触发时,IE的fromElement属性中保存率相关元素;
    *在mouseout事件触发时,IE的toElement属性中保存着相关元素。
    */
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            returnevent.relatedTarget;
        } elseif (event.toElement){
            returnevent.toElement;
        } elseif (event.fromElement){
            returnevent.fromElement;
        } else {
            returnnull;
        }
    
    },
    
    //获取鼠标滚轮mousewheel事件
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    
    //取消事件的默认行为,如果cancelable是true,则可以使用这个方法;
    //如:点击超链接时阻止其访问herf属性实现跳转
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    
    //取消事件的进一步捕获或冒泡。如果bubbles为true则可以使用这个方法;
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
 
    //获取剪切板文本
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || );
        return clipboardData.getData("text");
    },
 
    //设置剪切板文本
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } elseif (){
            .setData("text", value);
        }
    }
 
};
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12385.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/12385.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定