事件对象(一)

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=" 200px; height: 200px; background-color: #ccc;">
         <span style=" 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);
});