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

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);
        }
    }

};
时间: 2024-11-08 21:40:27

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

JavaScript对象、原型、原型链知识总结思维导图

这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScript支持面向对象(OO)编程,但不使用类或者接口.对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以采用下列模式创建对象. 工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象.这个模式后来被构造函数模式所取代. 构造函数模式,可以创建自定义引用类

JavaScript中各大板块思维导图

学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科学与艺术.逻辑与想象之间平衡发展,从而开启人类大脑的无限潜能.思维导图因此具有

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

由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方面的.首先,每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差.其次,必须事先指定所有事件处理程序而导致的 DOM 访问次数,会延迟整个页面的交互就绪时间.从如何利用好事件处理程序的角度出发,还是有一些方法能够提升性能的. 事件经常由用户操作或通过其他浏览

JavaScript基础回顾(思维导图之JavaScript变量)

来自为知笔记(Wiz)

整理我们的知识之思维导图

最近在备战软考,首先看的比较系统的软考资料就是希赛的软考视频,一个老师巴拉巴拉的在哪里叨叨了我十几天,在没有一点感情色彩的讲课中,我硬是凭着我坚强的毅力挺了过来,后来想想我以前的老师讲课都还挺好的,最起码不会像希赛一样,一个语调将一两个小时.但是抱怨完毕后我还是想来说说我再看完视频后总结的感受. 首先说一下这次软考视频,东西无非就是学过的,和没学过的,尽管以前的很多东西也都接触过,但是知道看完视频以后才发现,知道和学过那完全不是一个概念,学过和掌握又完全不是一个概念,那么今天我就说一下我学过的数

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

一:认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格(1:链式代码风格2:位代码添加注释) 3.jQuery对象和DOM对象(1.DOM对象和jQuery对象简介2.DOM对象和jQuery对象互相转换) 二:jQuery选择器 1.什么是jQuery选择器 2.jQuery选择器优势 3.jQuery选择器 1.基本选择器(5种#id,.class,element,*,select1....selectN) 2.层次选择器

PMP第六版十大知识领域思维导图和全部备考资料

由于今年的教材改版了,所以资料我这边找的都是最新版.给大家分享出来吧:资料比较多,全部资料的话大家可以留言或者私信. 原文地址:http://blog.51cto.com/13770432/2326676

吴裕雄--天生自然Android开发学习:android开发知识学习思维导图

原文地址:https://www.cnblogs.com/tszr/p/12017363.html

Python基础知识思维导图|自学Python指南

微信公众号[软件测试大本营]回复"python",获取50本python精华电子书. 测试/开发知识干货,互联网职场,程序员成长崛起,终身学习. 现在最火的编程语言是什么?答案就是Python. 人生苦短,我用Python Python的特点: Python一直是位于编程语言排行榜的前三位, Python遵循"简单.优雅.明确"的设计哲学,语法简单易懂,而且Python的中文文档也于2019年3月份发布,各种开发环境也越来越简单. Python免费开源. Pytho