Javascript和jquery事件--事件對象event


1、  事件對象event

對於event,js的解釋是Event 對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。而jq的解釋是事件處理(事件對象、目標元素的獲取,事件對象的屬性、方法等)在不同瀏覽器之間存在差異,jQuery在遵循W3C規范的情況下做了封裝統一。

你的網頁需要兼容不同的瀏覽器,除了樣式的不同外,更致命的就是事件對象的差異。使用console.log(e),你就可以看到相關的參數。雖然jq已經對兼容進行過封裝,但是我還是想進行了解,所以先看看關於js的事件對象。

(1) Js的事件對象event

A.通過event,可以獲取到鼠標鍵盤這些設備的狀態,如:

  altKey, ctrlKey, metaKey, shiftKey這四個布爾值,獲得的是事件發生時‘ALT’‘CTRL’‘META’‘SHIFT’鍵的狀態。

  PageX,PageY獲得鼠標相對頁面的位置。

  clientX,clientY獲得的是鼠標相對瀏覽器的位置。

  screenX,screenY獲得的是鼠標相對當前頁面屏幕的位置

  offsetX,offsetY是鼠標在觸發事件的元素中的位置。

  x,y等同screenX,screenY。

  button獲得鼠標點擊的是哪個鍵,在谷歌瀏覽器中0-左鍵,1-滾輪,2-右鍵(當然右鍵事件瀏覽器有默認事件,下面可能會提到自定義右鍵事件)。

B.除此之外,還有一些比較有用的屬性

  cancelBubble,如果事件句柄想阻止事件傳播到包容對象,必須把該屬性設為 true。和阻止冒泡相類似,但有所不同。

  fromElement,toElement主要用於mouseover 和 mouseout 事件

  keyCode,應該與keypress 事件,鍵盤事件有關,下文會研究。

  returnValue 可以阻止事件繼續觸發,比如超鏈接,表單提交,和return false相關但有所差別

  srcElement,target,觸發事件的源頭

  currentTarget,綁定監聽器的事件,和target的區別,比如,一個是最先冒泡的元素,一個可以是冒泡過程的任何一個元素。

  timeStamp         返回事件生成的日期和時間。

  type  返回當前 Event 對象表示的事件的名稱。

  bubbles     返回布爾值,指示事件是否是起泡事件類型。

  eventPhase       返回事件傳播的當前階段。

  initEvent() 初始化新創建的 Event 對象的屬性。

  preventDefault()       通知瀏覽器不要執行與事件關聯的默認動作。

  stopPropagation()     不再派發事件。

  isTrusted屬性返回一個布爾值,表示該事件是否為真實用戶觸發。用戶觸發的事件返回true,腳本觸發的事件返回false。

  stopImmediatePropagation()方法阻止同一個事件的其他監聽函數被調用。

    如果同一個節點對於同一個事件指定了多個監聽函數,這些函數會根據添加的順序依次調用。只要其中有一個監聽函數調用了stopImmediatePropagation方法,其他的監聽函數就不會再執行了。

 

C.一些常用的兼容寫法

  獲得event對象兼容性寫法

    var event = e||window.event

  獲得target兼容型寫法

    var target = event.target||event.srcElement

  阻止瀏覽器默認行為兼容性寫法

    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

  阻止冒泡寫法

    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

(2)  Jq的事件對象

一些常用的屬性

  event.type:獲取事件的類型,觸發元素的事件類型

  event.pageX 和 event.pageY:獲取鼠標當前相對於頁面的坐標,可以確定元素在當前頁面的坐標值,是以頁面為參考點,不隨滑動條移動而變化

  event.target:獲取觸發事件的元素

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

     this和event.target都是dom對象,可以轉換為jquery對象:$(this)和$(event.target)

  event.which:獲取在鼠標單擊事件中鼠標的左、中、右鍵(左鍵1,中間鍵2,右鍵3),在鍵盤事件中鍵盤的鍵碼值

  event.currentTarget : 獲取冒泡前的當前觸發事件的DOM對象, 等同於this

  event.preventDefault() :阻止默認行為,可以用 event.isDefaultPrevented() 來確定preventDefault是否被調用過了

  event.stopPropagation() :阻止事件冒泡,事件是可以冒泡的,為防止事件冒泡到DOM樹上,不觸發任何前輩元素上的事件處理函數,可以用 event.isPropagationStopped() 來確定stopPropagation是否被調用過了

參考:

https://www.cnblogs.com/wuln/p/6251486.html

https://www.cnblogs.com/songyaqi/p/5204143.html

https://blog.csdn.net/knock_me/article/details/79646105

https://blog.csdn.net/weixin_41342585/article/details/80659736

https://blog.csdn.net/baihuaxiu123/article/details/53148780(重要)

https://blog.csdn.net/u012528184/article/details/41724275

(returnVlaue=false和reture false)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM