事件对象(一)
JavaScript在事件处理函数中默认传递了event对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。jQuery在封装的时候，解决了这些问题，并且
还创建了一些非常好用的属性和方法。
事件对象
事件对象就是event对象，通过处理函数默认传递接受。之前处理函数的e就是event事件对象，event对象有很多可用的属性和方法，我们在JavaScript课程中已经详细的了解
过这些常用的属性和方法，这里，我们再一次演示一下。
如html(部分)代码如下：
<input type="button" value="按钮" />
通过处理函数传递事件对象：
$("input").bind("click", function(e) { //接受事件对象参数
alert(e); //[object Object]
});
event对象的属性
| 属性名 | 描述 |
| type | 获取这个事件的事件类型，例如：click |
| target | 获取绑定事件的DOM元素 |
| data | 获取事件调用时的额外数据 |
| relatedTarget | 获取移入移出目标点离开或进入的那个DOM元素 |
| currentTarget | 获取冒泡前触发的DOM元素，等同于this |
| pageX/pageY | 获取相对于页面原点的水平/垂直坐标 |
| screenX/screenY | 获取显示器屏幕位置的水平/垂直坐标(非jQuery封装) |
| clientX/clientY | 获取相对于页面视口的水平/垂直坐标(非jQuery封装) |
| result | 获取上一个相同事件的返回值 |
| timeStamp | 获取事件触发的时间戳 |
| which | 获取鼠标的左中右键(1,2,3)，或获取键盘按键 |
| altKey/shiftKey/ctrlKey/metaKey |
获取是否按下了alt、shift、ctrl(这三个非jQuery封装)或meta键(IE原生meta键，jQuery做了封装) |
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件对象</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" value="按钮" /> <div style="width: 200px; height: 200px; background-color: #ccc;"> <span style="width: 100px; height: 100px; background-color: #eee; display: block;"> </span> </div> </body> </html>
通过event.type属性获取触发事件名：
$("input").bind("click", function(e) {
alert(e.type); //通过event.type属性获取触发事件名
alert(typeof e.type); //触发事件名的类型——string
});
通过event.target获取绑定的DOM元素：
$("input").bind("click", function(e) {
alert(e.target); //[object HTMLInputElement]
});
注意：target是获取触发元素的DOM，触发元素，就是你点了哪个就是哪个；currentTarget得到的是监听元素的DOM，你绑定的哪个就是哪个。
$("input").bind("click", function(e) {
alert(e.target); //[object HTMLInputElement]
});
$("input").bind("click", function(e) {
alert(e.currentTarget); //[object HTMLInputElement]
});
当绑定到div元素上时，
$("div").bind("click", function(e) {
alert(e.currentTarget); //[object HTMLDivElement]
});
下面再来看relatedTarget属性：
//获取移入到span之前的那个DOM元素 $("span").bind("mouseover", function(e) { alert(e.relatedTarget); }); //获取移出span之后到达最近的那个DOM元素 $("span").bind("mouseout", function(e) { alert(e.relatedTarget); });
$("div").bind("click", function(e) {
alert(this == e.currentTarget); //获取绑定的那个DOM元素，相当于this，返回true
});
//this代表e.currentTarget(div元素)，e.target获取触发元素 //当点击<div>元素时，e.target即是div元素，所以返回true //当点击<span>元素时，e.target即是span元素，所以返回false $("div").bind("click", function(e) { alert(this == e.target); });
通过event.data获取额外数据，可以是数字、字符串、数组、对象。
获取的数据是数字：
$("input").bind("click", 123, function(e) { //传递data数据
alert(e.data); //获取数字数据
});
获取的数据是字符串：
$("input").bind("click", "abc", function(e) {
alert(e.data);
});
获取的数据是数组：
$("input").bind("click", [1,2,3,'a','b'], function(e) {
alert(e.data[3]);
});
获取的数据是对象：
$("input").bind("click", {user:'Lee', age:100}, function(e) {
alert(e.data.age);
});
pageX/pageY：相对于页面原点的水平/垂直坐标；
screenX/screenY：相对于显示器屏幕位置的水平/垂直坐标(非jQuery封装)；
clientX/clientY：相对于页面视口的水平/垂直坐标(非jQuery封装)。
$(document).bind("click", function(e) {
alert(e.pageX+","+e.screenX+","+e.clientX); //3个值相等
});
$(document).bind("click", function(e) {
alert(e.pageY+","+e.screenY+","+e.clientY); //有滚动条会更好的说明
});
获取上一次事件的返回值：
$("input").bind("click", function(e) {
return 123;
});
$("input").bind("click", function(e) {
alert(e.result);
});
获取当前的时间戳：
$("input").bind("click", function(e) {
alert(e.timeStamp);
});
获取鼠标的左中右键：
$("input").bind("mousedown", function(e) {
alert(e.which);
});
获取键盘的按键：
$("input").bind("keyup", function(e) {
alert(e.which);
});
获取是否按下了ctrl键，meta键不存在，导致无法使用：
$("input").bind("click", function(e) {
alert(e.ctrlKey);
});
