事件对象属性
e.currentTarget // 在事件冒泡阶段中的当前DOM元素
e.data // 当前执行的处理器被绑定的时候,包含可选的数据
e.delegateTarget1.7+ // 当currently-called的jQuery事件处理程序附加元素。
e.namespace // 当事件被触发时此属性包含指定的命名空间。
e.pageX // 鼠标相对于文档的左边缘的位置。
e.pageY // 鼠标相对于文档的左边缘的位置。
e.relatedTarget // 在事件中涉及的其它任何DOM元素。
e.result // 这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined 。
e.target // 最初触发事件的DOM元素。
e.timeStamp // 这个属性返回事件触发时距离本次页面刷新时的毫秒数。
e.type // 点击所有锚点后弹出事件类型。
e.which // 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。
e.preventDefault() // 阻止默认事件行为的触发。
e.stopPropagation() // 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。
e.stopImmediatePropagation() // 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
e.isDefaultPrevented() // 根据事件对象中是否调用过 e.preventDefault() 方法来返回一个布尔值。
e.isPropagationStopped() // 根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
e.isImmediatePropagationStopped() // 根据事件对象中是否调用过 e.stopImmediatePropagation() 方法来返回一个布尔值。
注:JQ在封装中解决了事件对象的兼容问题。
用法:
<p>111</p>
<div>222<button>按钮</button></div>
//在事件冒泡阶段中的当前DOM元素
$("div").click(function(e){ //点击div中的button元素,让click事件冒泡到div上
alert( e.currentTarget.nodeName); //弹出:"DIV"
alert( e.target.nodeName); //弹出:"BUTTON" (最初触发元素)
})
//传入数据
$("p").bind('click', {a:2}, function(e){
alert( e.data.a ); // 2
});
//获取委托事件的祖辈元素
$("div").on("click", "button", function(e) { //将button上的点击事件绑定在父元素div上
$(e.delegateTarget).css("background-color", "red"); //e.delegateTarget即 div 元素
});
//事件命名空间中的名字
$("p").bind("test.something", function(e) { //给p元素绑定 test.something事件
alert( e.namespace ); //"something"
});
$("p").trigger("test.something"); //若该事件没执行则执行该事件
//鼠标在页面的位置
$(document).click(function(e){
alert(e.pageX+"|"+e.pageY); //点击页面时弹出鼠标在页面中的位置
})
//事件触发受影响的元素
$("button").mouseout(function(e) {
alert(e.relatedTarget.nodeName); // "DIV" (鼠标从button离开后进入的元素)
});
//获取前一个事件的返回值
$("p").click(function(){ return "aaa"} );
$("p").click(function(e){ alert(e.result) }); //弹出:"aaa"
//最初触发事件的DOM元素。
$("p").click(function(e){
alert(e.target.nodeName); //"P"
});
//页面计时
$("p").click(function(e){
console.log(e.timeStamp); //64501.25 (页面刷新后64501毫秒时点击了p)
});
//返回事件类型
$("p").click(function(e) {
alert(e.type); // "click"
});
//获取按键的键码
$(document).keydown(function(e){
alert(e.which); //当按下enter键时,弹出: 13
})
//阻止冒泡和默认事件
$("a").click(function(e){
alert( e.isDefaultPrevented() ); // false
e.preventDefault(); //阻止默认事件
e.stopPropagation(); //阻止冒泡
alert( e.isPropagationStopped() ); // true
alert( e.isDefaultPrevented() ); // true
});
//阻止元素上其它的事件处理函数的执行
$("button").click(function(e){
e.stopImmediatePropagation(); //阻止 button 元素上其它的事件处理函数的执行
});
$("button").click(function(e){ //不会执行,也不会冒泡
alert(1);
});
$("div").click(function(e) { //只有点击 div 本身,才实行函数
alert(2);
});