IE和DOM中的事件對象說明

2016-07-11 1706 1 編輯:Monster 來源:相關書籍

當在IE瀏覽器中發生一個事件時,瀏覽器將會自動創建一個名為"event"的事件對象,在事件處理函數中可以通過訪問該對象來獲取所發生事件時的各種信息,包括觸發事件的HTML元素、鼠標指針位置及鼠標按鈕狀態等,在IE,event對象實際上又是window對象的一個event屬性,因此在代碼中可以通過window.event或event形式來訪問該對象。

盡管它是window對象的屬性,但event對象還是只能在事件發生時被訪問,所有的事件處理函數執行完之后,該對象就自動消失了。

而標準DOM中規定event對象必須作為唯一的參數傳給事件處理函數,因此在類似Firefox瀏覽器中訪問事件對象通常將其作為參數,代碼如下:

oP.onclick=function(oEvent){

}

因此為了兼容這兩種瀏覽器,通常采用下面的方法。

oP.onclick=function(oEvent){

oEvent=oEvent||window.event;

瀏覽器在獲取了事件對象后就可以通過它的一系列屬性和方法來處理各種具體事件了,如鼠標事件、鍵盤事件和瀏覽器事件等。對于鼠標事件來說,其常用的屬性是它的位置信息屬性,主要有以下兩類。

(1)screenX/screenY:事件發生時,鼠標在計算機屏幕中的坐標。

(2)clientX/cilentY:事件發生時,鼠標在瀏覽器窗口中的坐標。

通過鼠標的位置屬性,可以隨時獲取到鼠標的位置信息。例如,有些電子商務網站可以將商品用鼠標拖放到購物籃中,這就需要獲取鼠標事件的位置,才能讓商品跟著鼠標移動。

2.鍵盤事件對象的應用舉例—驗證用戶輸入的是否為數字

如果要判斷用戶在文本框中輸入的內容是否為數字,最簡單的辦法就是用鍵盤事件對象來檢測按下鍵的鍵盤碼是否是在48到57之間,當用戶按下的不是數字鍵時,會發現根本無法輸入。

3.鼠標事件對象的應用舉例—制作跟隨鼠標移動的圖片放大效果

本例中,當鼠標滑動到某張圖片上時,鼠標的旁邊就會顯示這張圖片的放大圖片,而且放大的圖片會跟隨鼠標移動,在整個示例中,原圖和放大的圖片都采用的是同一張圖片,只不過對原圖設置了width和height屬性,使它縮小顯示,而放大圖片就顯示圖片的真實大小,制作步驟如下。

(1)把幾張要放大的圖片放到一個div容器中,然后再添加一個div的空容器用來放置當鼠標經過時顯示的放大圖像。

當然,嚴格來說,把這幾幅圖片放到一個列表中結構會更清晰些。

(2)寫CSS代碼,對于img元素來說,只要定義它在小圖時的寬和高,并給它添加一條邊框以顯得美觀。對于enlarge_img元素,它應該是一個浮在網頁上的絕對定位元素,在默認時不顯示,并將它的z-index值設置很大.防止被其他元素遮蓋。

(3)對鼠標在圖片上移動這一事件對象進行編程。首先獲取到img元素,當鼠標滑動到它們上面時,使#enlarge_img元素顯示,并且通過innerHTML往該元素中添加一個圖像元素作為大圖。大圖在網頁上的縱向位置(即距離頁面頂端的距離“top")應該是鼠標到窗口頂端的距離(event.clientY)加上網頁滾動過的距離(document.body.scrollTop)。

這樣該實例就制作好了,注意JavaScript代碼在這里只能放在結構代碼的后面,當然可以把這些JavaScript代碼作為一個函數放在window.onload事件中。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾