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