JS之事件物件

2021-08-27 21:21:33 字數 1432 閱讀 2601

當事件的響應函式被觸發時,瀏覽器每次都會將乙個事件物件作為實參傳遞進響應函式。現在咱們通過獲取滑鼠座標來分析事件物件吧。

直接上**

結果

chrome及其它瀏覽器正常彈出,ie8出現錯誤,在ie8響應函式被觸發時,瀏覽器不會傳遞事件物件,ie8及以下的瀏覽器中,是將事件物件作為window物件的屬性儲存的。

所以**應該這樣寫:

var areadiv=document.getelementbyid("div1");

areadiv.onmousemove=function(event)//事件物件event作為window的屬性儲存

注意:以上**火狐瀏覽器又不支援了,ie和chrome瀏覽器支援

所以最終能相容瀏覽器的**是這樣:

var areadiv=document.getelementbyid("div1");

areadiv.onmousemove=function(event)

// 法二

event=event || window.event;

// 公共**

var x=window.event.clientx;

var y=window.event.clienty;

alert([x,y]);

}

注意上面有個問題,那就要從clientx與pagex說開了(下面每個字都要細讀,很重要)

clientx和clienty用於獲取滑鼠在當前的可見視窗的座標

事件發生時滑鼠在瀏覽器內容區域的x/y座標(不包含滾動條)。

瀏覽器內容區域即瀏覽器視窗中用來顯示網頁的可視區域,注意這個可視,也就是說需要拖動滾動條才能看到的區域不算。

當你將瀏覽器視窗縮小時,clientx/clienty的最大值也會縮小,但始終,它們的最大值不會超過你瀏覽器可視區域。

特別說明:ie下此屬性不規範,它們的最小值不是0而是2,也就是說ie下的clientx/clienty比火狐下始終大2px。

pagex和pagey可以獲取滑鼠相對於當前頁面的座標,但是這兩個屬性在ie8中不支援

滑鼠相對於整個頁面的x/y座標。

注意,整個頁面的意思就是你整個網頁的全部,比如說網頁很寬很長,寬2000px,高3000px,那pagex,pagey的最大值就是它們了。

特別說明:ie不支援!

獲取滾動距離:

chrome認為瀏覽器的滾動條是body的,可以通過body.scrolltop來獲取,火狐瀏覽器認為瀏覽器的滾動條是html的,可以通過documentelement.scrolltop來獲取。

JS之事件監聽

一 如果事件監聽類似於如下寫法,則最終只會執行最後乙個事件監聽,其他監聽都會被覆蓋掉。window.onload funtion window.onload funtion window.onload funtion 最終只會輸出 3 二 如果事件監聽類似於如下寫法,則每個事件監聽都會被執行,其他監...

執行緒同步之事件物件

執行緒同步 讓執行緒協同步調,按照一定的先後次序來執行 當人工重置的事件得到通知時,等待該事件的所有執行緒均變為可排程執行緒。當乙個自動重置的事件得到通知時,等待該事件的執行緒中只有乙個執行緒變為可排程執行緒。參考 多執行緒與事件物件 多執行緒程式設計 13 多執行緒同步之 event 事件物件 i...

js之事件冒泡和事件捕獲

1,ie只冒泡,w3c先捕獲再冒泡 事件的傳播過程 事件捕捉 目的節點 冒泡事件,下面的 體現了事件的冒泡過程,某一節點定義了onclick事件,該事件會從當前的節點往上到父節點一直到document節點,在冒泡的過程中,如果父節點同樣定義了該事件控制代碼,就會同樣呼叫該控制代碼,這也是事件 的原理...