首页 > 代码库 > 对于jq里的Event对象的方法一些理解
对于jq里的Event对象的方法一些理解
这些是我从jq手册的Event对象一篇里获取的理解
event.currentTarget
在事件冒泡阶段中的当前DOM元素
例子：
$("p").click(function(event) {
alert( event.currentTarget === this ); // true
});
概述：相当于this（DOM的）
event.data
当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind。
例子：
$("a").each(function(i) {
$(this).bind(‘click‘, {index:i}, function(e){
alert(‘my index is ‘ + e.data.index);
});
});
概述：不太清楚，貌似可以获取对象的属性
event.delegateTarget
当currently-called的jQuery事件处理程序附加元素。
例子：
$(".box").on("click", "button", function(event) {
$(event.delegateTarget).css("background-color", "red");
});
概述：delegateTarget是例子中的.box而不是它里面的button
event.isDefaultPrevented()
根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
例子：
$("a").click(function(event){
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});
概述：没什么好说的
event.isImmediatePropagationStopped()
根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
例子：
function immediatePropStopped(e) {
var msg = "";
if ( e.isImmediatePropagationStopped() ) {
msg = "called";
} else {
msg = "not called";
}
$("#stop-log").append( "<div>" + msg + "</div>" );
}
$("button").click(function(event) {
immediatePropStopped(event);
event.stopImmediatePropagation();
immediatePropStopped(event);
});
概述：又一个没什么好说的
event.isPropagationStopped()
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
例子：
function propStopped(e) {
var msg = "";
if ( e.isPropagationStopped() ) {
msg = "called";
} else {
msg = "not called";
}
$("#stop-log").append( "<div>" + msg + "</div>" );
}
$("button").click(function(event) {
propStopped(event);
event.stopPropagation();
propStopped(event);
});
概述：这三个函数下面会说到的
event.namespace
当事件被触发时此属性包含指定的命名空间。
例子：
$("p").bind("test.something", function(event) {
alert( event.namespace ); });
$("button").click(function(event) {
$("p").trigger("test.something");
});
概述：相当于给事件一个副名
event.pageX
鼠标相对于文档的左边缘的位置。
例子:
$("p").on("click", function(a){
alert(a.pageX);
});
概述：记得加上事件对象（例子中的a）
event.pageY
鼠标相对于文档的上边缘的位置。
例子：
$("p").on("click", function(a){
alert(a.pageY);
});
概述：同上
event.preventDefault()
阻止默认事件行为的触发。
例子：
$("a").on("click", function(a){
a.preventDefault();
alert(a.pageX);
});
概述：首先它只能阻止默认事件（比如a链接的跳转，提交按钮的提交行为） 另外它也需要事件对象（例子中的a）
event.relatedTarget
在事件中涉及的其它任何DOM元素
例子：
$("a").mouseout(function(event) {
alert(event.relatedTarget.nodeName); // "DIV"
});
概述： 指事件对应的对象 各个事件的对应方式不一样 比如对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。它也需要事件对象
event.result
这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。
例子：
$("button").click(function(){
return "Hello world!";
});
$("button").click(function(event){
$("p").html(event.result);
})
概述：前面的点击事件返回了一个值，后面的result可以获取其值。这种方式稍显麻烦，但是有时也是有用的
event.stopImmediatePropagation()
阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
例子：
$(document).ready(function(){
$("div").click(function(event){
alert("事件句柄 1 被执行");
});
$("div").click(function(event){
event.stopImmediatePropagation();
alert("事件句柄 2 被执行");
});
$("div").click(function(event){
alert("事件句柄 3 被执行");
});
});
概述：简单来说就是制止后面会发生的事件
event.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
例子：
$("p").click(function(event){
event.stopPropagation(); // do something
});
概述：点击子元素，触发了子点击事件，但父元素的父点击事件也会触发，这个方法就是为了阻止那种情况（这个情况叫做冒泡事件）
event.target
最初触发事件的DOM元素。
例子：
Html：
<div id="n1" style="height: 100px; background: #eee;" >
<br>
<p id="n2" style="background: #999;" >段落文本...段落文本...<br>
<span id="n3" style="background: #fff;" >专注于编程开发技术分享</span>
</p>
</div>
Jq：
$("div").click( function(event) {
alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id);
} );
概述：对应冒泡情况用的，获取真正触发的元素
event.timeStamp
这个属性返回事件触发时距离1970年1月1日的毫秒数。（貌似火狐不能用）
这可以很方便的检测某个jQuery函数的性能。
例子：
$(document).ready(function(){
$("button").click(function(event){
$("span").text(event.timeStamp);
});
});
概述：上面的描述已经很清楚了
event.type
这个事件的事件类型
例子：
$("a").click(function(event) {
alert(event.type); // "click"
});
概述：无需语赘
event.which
针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<input id="whichkey" value="http://www.mamicode.com/type something">
<div id="log"></div>
<script>
$(‘#whichkey‘).bind(‘keydown‘,function(e){
$(‘#log‘).html(e.type + ‘: ‘ + e.which ); });
</script>
</body>
</html>
概述：能获取键值
对于jq里的Event对象的方法一些理解