js二級事件模型的處理細節

2021-09-25 06:22:51 字數 2143 閱讀 3387

一、糾正網路上的乙個誤傳--「ie不支援事件捕獲」

可以在瀏覽器中執行上面demo,在各主流瀏覽器中,滑鼠移上都可以分別觸發捕獲與冒泡事件的監聽函式,所以ie也是支援事件捕獲的,連ie6都支援,只是在命中元素上事件的觸發的順序會稍有區別,參見下條。

二、在命中元素上冒泡和捕獲的執行順序

命中元素上事件冒泡和捕獲的觸發順序在不同瀏覽器中的順序稍有區別,在ie6-8中是先觸發捕獲再觸發冒泡,在ie9及以上、chrome、firefox等瀏覽器是先觸發冒泡再觸發捕獲 

三、事件的瀏覽器相容方面的東西

瀏覽器\區別

新增監聽

事件名移除監聽

僅阻止事件冒泡

ie6-8

attachevent

標準事件名+on,如onclick、onmouseover

detachevent

e = e || window.event;e.cancelbubble = true;

ie9及以上,chrome等

addeventlistener

事件名,如click、mouseover

removeeventlistener

e = e || window.event;e.stoppropagation();

四、事件中的元素關係

獲取觸發事件監聽函式的的元素可以用下面的方法做到瀏覽器相容

var evt = e || window.event;

var eventsrc = evt.target||evt.srcelement;

mouseover、mouseout、mousemove等事件還支援fromelement與toelement(ie6也同樣支援),表示滑鼠從一元素移到另一元素。滑鼠的移入移出存在邊界整齊對其的情況,此情況下事件會直接跳過那些被遮蓋的元素,直接反應滑鼠的移入移出元素。另外乙個需要注意的問題是ie6下的body會緊縮,所以從頁面最邊緣向內移動時後出現從html移入的情況,如需做邊界處理請注意此點。在低階ie下會存在事件下漏的問題,參見第六條。

五、事件中的滑鼠位置

用滑鼠的位置在應用中做一些判斷是一件效率較低且使用場景很侷限的事,但是在特定的場景下卻又無可奈何,既然我們改變不了瀏覽器與應用場景那就費點功夫搞明白怎麼用現有的這點資源來做一些事情,正所謂人生的意義不在於拿一手好牌,而在於打好一手爛牌。

chrome一共提供了7組與位置有關的資訊:clientx、layerx、offsetx、pagex、screenx、webkitmovementx、x;ie的事件提供的位置引數我就不說了,我們以chrome事件的位置引數為標準,用ie固有的屬性來模仿。

screenx:滑鼠在顯示螢幕上的座標;

clientx:滑鼠在頁面顯示區域的座標。

offsetx:滑鼠相對於「觸發事件的元素」的位置,從內容區域左上角開始定位,不是從border左上角開始!這個屬性比較好用,用來判斷滑鼠點在乙個元素中的哪個位置很方便。

注:以上幾個都是各瀏覽器通用的。

pagex:標準瀏覽器特有,滑鼠在頁面上的位置,從頁面左上角開始定位,這個可以很方便在整個頁面上進行定位,ie沒有直接替換的屬性。

layerx:標準瀏覽器特有,滑鼠相對於「觸發事件的元素的層級關係中離該元素最近的,設定了position的父元素」的邊界的位置,從border的左上角開始定位,即如果這個父元素存在border,則座標原點在border的左上角,而不是內容區域的左上角。 

x:ie特有,跟layerx乙個效果,可作為layerx的直接替換屬性,現代瀏覽器的現行版本一景支援了該屬性。 

webkitmovementx:滑鼠的移動距離,主要用在一些3d場景中,比如第一視角的遊戲,需要計算使用者滑鼠的移動距離來反饋畫面。下面來自mozilla官網的api

當然老式瀏覽器就不大算指望他了,下面是一段相容**:

1 document.addeventlistener("mousemove", function

(e) , false);

注:ie和ff的定位有個1px的差別,實際上,ie的定位從0開始,ff的定位從1開始,ff永遠會比ie大1px,需要根據實際情況處理。

六、ie的事件下漏解決方案

在低階ie下當兩個元素重疊且不設定背景時,滑鼠事件會從上面一層的元素漏到下面的元素上。解決此問題是設定背景,如果頁面有半透明效果那就需要額外加乙個元素設定背景再將其透明度用css設為全透明。

二級指標輸出模型

指標的輸入輸出模型是指,在主調函式中分配記憶體 輸入模型 還是被調函式分配記憶體 輸出模型 include include include include 指標做輸出 被呼叫函式分配記憶體 指標做輸入 主調函式分配記憶體 求檔案中兩段話的長度 int getmem char myp1,int myl...

二級聯動 js

在html部分只寫兩個select標籤 option標籤將用js的方法寫入 onchange 內容發生改變事件 用於select下拉列表中後的內容發生改變時候的觸發 核心部分就是js裡面的內容 建立乙個物件data來儲存資料 data 首先通過for迴圈來新增第一級裡面的內容 province va...

二級選單聯動js

script src city.js script 建立文件片段,使用完後釋放 var flag document.createdocumentfragment 建立城市下拉框 var select document.createelement select 給城市下拉框乙個id select.id...