JavaScript事件基础知识总结【思维导图】
另外附上来自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事件基础知识总结【思维导图】的更多相关文章
- Java基础知识学习思维导图
- Java知识汇总——思维导图
转载:https://www.cnblogs.com/java1024/p/8757952.html Java知识点汇总,从基础到常用的API.还有常用的集合类,总结的很详细.图片是从论坛里面找到的, ...
- Java知识体系思维导图
Java知识体系,为方便预览,将思维导图上传至印象笔记,博客园直接上传图片受限于图片大小,暂时接触这么多,待以后丰富 https://app.yinxiang.com/shard/s24/nl/272 ...
- 2.MVC基础-Model概述(思维导图)
已思维导图形式,便于记忆和补充
- JS事件学习笔记(思维导图)
导图
- Python知识体系思维导图:
基础知识 数据类型 1.序列 2.字符串 3.列表和元组 4.字典和集合 循环 & 判断
- JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)
由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...
- Mysql数据库基础_复习思维导图
Mysql复习的一个小总结,用xmind写的.(字数没有都不给我发博客) 下面是一些备注 子查询 MySQL子查询称为内部查询,而包含子查询的查询称为外部查询. 子查询可以在使用表达式的任何地方使用, ...
- JQuery基本知识框架思维导图(上)
一:认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格(1:链式代码风格2:位代码添加注释) 3.jQuery对象和DOM对象(1 ...
随机推荐
- codeForce-19D Points (点更新+离散化)
题目大意:在二维坐标系的x正半轴,y正半轴和第一象限内,有三种操作: 1.add x,y (添加点<x,y>): 2.remove x,y(移除点<x,y>): 3.find ...
- 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)目前 ...
- 锁_rac环境kill锁表会话后出现killed状态(解决)
原创作品,出自 "深蓝的blog" 博客,深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46876961 ra ...
- python命令行添加Tab键自动补全
1.编写一个tab的自动补全脚本,名为tab.py #!/usr/bin/python # python tab complete import sys import readline import ...
- 019. Asp.net将SqlServer中的数据保存到xls/txt中
using System; using System.Collections; using System.Configuration; using System.Data; using System. ...
- Linux-HAproxy+Keepalived
HAproxy+++++++++++++Info+++++++++++VIP:192.168.1.222HA-Master IP:192.168.1.117HA-Backup IP:192.168.1 ...
- 如何用js检查浏览器是否安装flash插件
<script type="text/javascript" language="JavaScript"> //Powered By smvv @h ...
- Java语言编码规范(Java Code Conventions)
Java语言编码规范(Java Code Conventions) 名称 Java语言编码规范(Java Code Conventions) 译者 晨光(Morning) 简介 本文档讲述了Java语 ...
- 数字根(digital root)
来源:LeetCode 258 Add Dights Question:Given a non-negative integer num , repeatedly add all its digi ...
- shell随机写入指定文件
具体思路如下,求代码 shell随机读取file.txt文本,file.txt文本有许多行文字 想用shell随机读取file.txt的任意一行文字并且写入到file.php第四行文件. sed -i ...