jQuery事件物件event的屬性和方法

武文博KevinLM發表於2018-03-10
jQuery事件物件

事件處理（事件物件、目標元素的獲取，事件物件的屬性、方法等）在不同瀏覽器之間存在差異，jQuery在遵循W3C規範的情況下做了封裝統一

一、事件物件常用的屬性：
  • event.type：獲取事件的型別，觸發元素的事件型別
$("a").click(function(event) {
  alert(event.type); // "click"事件
});
  • event.pageX 和 event.pageY：獲取滑鼠當前相對於頁面的座標，可以確定元素在當前頁面的座標值，是以頁面為參考點,不隨滑動條移動而變化
$("a").click(function(event) {  
  alert("Current mouse position: " + event.pageX + ", " + event.pageY );
  return false;
});
  • event.target：獲取觸發事件的元素

　　this和event.target的區別：

　　　　js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

　　　　this和event.target都是dom物件，可以轉換為jquery物件：$(this)和$(event.target)

$("a[href=http://www.baidu.com]").click(function(event) {  
  alert(event.target.href);  
  return false;
});
  • event.which：獲取在滑鼠單擊事件中滑鼠的左、中、右鍵（左鍵1，中間鍵2，右鍵3），在鍵盤事件中鍵盤的鍵碼值
$("a").mousedown(function(e){  
    alert(e.which);  
    return false;
})
  • event.currentTarget : 獲取冒泡前的當前觸發事件的DOM物件, 等同於this

二、事件物件常用的方法：

  • event.preventDefault() ：阻止預設行為，可以用 event.isDefaultPrevented() 來確定preventDefault是否被呼叫過了
  • event.stopPropagation() ：阻止事件冒泡，事件是可以冒泡的，為防止事件冒泡到DOM樹上，不觸發任何前輩元素上的事件處理函式，可以用 event.isPropagationStopped() 來確定stopPropagation是否被呼叫過了

相關文章