另外附上来自Nicholas C.Zakas《JavaScript高级程序设计 第3版》中的跨浏览器兼容EventUtil对象。

var EventUtil = {
    //注册事件
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    //移除事件
    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;
        }
    },

    //获取事件
    getEvent: function(event){
        return event ? event : window.event;
    },

    //获取事件名称
    getTarget: function(event){
        return event.target || event.srcElement;
    },

    //获取鼠标键
    getButton: function(event){
        //DOM2中检测是否有MouseEvents模块
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
            // var k = event.button;
            //     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下
                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 {
            return event.keyCode;
        }
    },

    /*event对象的relatedTarget属性提供了相关元素的信息,这个属性只对于mouseover和mouseout事件才包含值;
    *对于其他事件,这个属性的值是null。
    *IE不支持relatedTarget属性,但提供了保存着同样信息的不同属性。
    *在mouseover事件触发时,IE的fromElement属性中保存率相关元素;
    *在mouseout事件触发时,IE的toElement属性中保存着相关元素。
    */
    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;
        }

    },

    //获取鼠标滚轮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 || window.clipboardData);
        return clipboardData.getData("text");
    },

    //设置剪切板文本
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    }

};

JavaScript事件基础知识总结【思维导图】的更多相关文章

  1. Java基础知识学习思维导图

  2. Java知识汇总——思维导图

    转载:https://www.cnblogs.com/java1024/p/8757952.html Java知识点汇总,从基础到常用的API.还有常用的集合类,总结的很详细.图片是从论坛里面找到的, ...

  3. Java知识体系思维导图

    Java知识体系,为方便预览,将思维导图上传至印象笔记,博客园直接上传图片受限于图片大小,暂时接触这么多,待以后丰富 https://app.yinxiang.com/shard/s24/nl/272 ...

  4. 2.MVC基础-Model概述(思维导图)

    已思维导图形式,便于记忆和补充

  5. JS事件学习笔记(思维导图)

    导图

  6. Python知识体系思维导图:

    基础知识 数据类型 1.序列 2.字符串 3.列表和元组 4.字典和集合 循环 & 判断

  7. JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...

  8. Mysql数据库基础_复习思维导图

    Mysql复习的一个小总结,用xmind写的.(字数没有都不给我发博客) 下面是一些备注 子查询 MySQL子查询称为内部查询,而包含子查询的查询称为外部查询. 子查询可以在使用表达式的任何地方使用, ...

  9. JQuery基本知识框架思维导图(上)

    一:认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格(1:链式代码风格2:位代码添加注释) 3.jQuery对象和DOM对象(1 ...

随机推荐

  1. codeForce-19D Points (点更新+离散化)

    题目大意:在二维坐标系的x正半轴,y正半轴和第一象限内,有三种操作: 1.add x,y (添加点<x,y>): 2.remove x,y(移除点<x,y>): 3.find ...

  2. MySQL 5.1.73升级为MySQL 5.5.35详解

    一.前言 二.概述 三.安装MySQL 5.1.73 四.升级为MySQL 5.5.35 五.总结 注,测试环境 CentOS 6.4 x86_64,MySQL 版本(5.1.73.5.5.35)目前 ...

  3. 锁_rac环境kill锁表会话后出现killed状态(解决)

    原创作品,出自 "深蓝的blog" 博客,深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46876961 ra ...

  4. python命令行添加Tab键自动补全

    1.编写一个tab的自动补全脚本,名为tab.py #!/usr/bin/python # python tab complete import sys import readline import ...

  5. 019. Asp.net将SqlServer中的数据保存到xls/txt中

    using System; using System.Collections; using System.Configuration; using System.Data; using System. ...

  6. Linux-HAproxy+Keepalived

    HAproxy+++++++++++++Info+++++++++++VIP:192.168.1.222HA-Master IP:192.168.1.117HA-Backup IP:192.168.1 ...

  7. 如何用js检查浏览器是否安装flash插件

    <script type="text/javascript" language="JavaScript"> //Powered By smvv @h ...

  8. Java语言编码规范(Java Code Conventions)

    Java语言编码规范(Java Code Conventions) 名称 Java语言编码规范(Java Code Conventions) 译者 晨光(Morning) 简介 本文档讲述了Java语 ...

  9. 数字根(digital root)

    来源:LeetCode 258  Add Dights Question:Given a non-negative integer  num , repeatedly add all its digi ...

  10. shell随机写入指定文件

    具体思路如下,求代码 shell随机读取file.txt文本,file.txt文本有许多行文字 想用shell随机读取file.txt的任意一行文字并且写入到file.php第四行文件. sed -i ...