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)