jQuery基础8-event事件对象

 事件对象属性

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

 

jQuery基础1-简介、语法

jQuery基础2-选择器

jQuery基础3-筛选（过滤、查找、串联）

jQuery基础4-dom元素操作

jQuery基础5-事件

jQuery基础6-动画效果

jQuery基础7-Ajax请求

jQuery基础8-event事件对象

jQuery基础9-工具函数

jQuery基础10-延迟对象 和 回调函数