JavaScript的事件物件

2021-08-05 23:16:32 字數 2259 閱讀 2012

事件物件,每個事件(包括滑鼠、鍵盤事件)觸發執行的過程中,都有對應的事件物件,通過事件物件可以獲得滑鼠相對頁面的座標資訊、通過事件物件也可以感知什麼鍵子被 觸發執行、通過事件物件還可以阻止事件流產生、阻止瀏覽器預設動作。

1、獲得事件物件

獲得:

①主流瀏覽器(ie9以上版本瀏覽器):

node.onclick = function(evt)

addeventlistener(型別,function(evt){}/函式名字);

function 函式名稱(evt){}

事件處理函式的第乙個

形參就是

事件物件

② ie(6/7/8)瀏覽器

node.onclick = function()

全域性變數event就是事件物件

操作事件物件

效果圖:

2、事件物件作用

(1)獲得滑鼠資訊

event.clientx/clienty;    //相對dom區域座標

event.pagex/pagey;        //相對dom區域座標,給考慮滾動條位置

event.screenx/screeny;    //相對螢幕座標

操作事件物件

效果圖:

(2)阻止事件流

event.stoppropagation();  //主流瀏覽器

event.cancelbubble = true; // ie瀏覽器

冒泡型、捕捉型都可以進行阻止,為了瀏覽器相容處理,只考慮冒泡型。

i am span

效果圖:

(3)阻止瀏覽器預設動作

瀏覽器預設動作,註冊form表單頁面,提交表單的時候,瀏覽器的頁面會根據action屬性值進行跳轉,這個動作稱為「瀏覽器預設動作」。

event.preventdefault(); //主流瀏覽器

event.returnvalue = false; //ie瀏覽器

return  false;           //dom1級事件設定起作用

(4)感知被觸發鍵盤鍵子資訊

event.keycode

獲得鍵盤對應的鍵值碼資訊

通過事件觸發時候獲得的keycode數值碼

資訊可以對應鍵盤的鍵子資訊。

使用者名稱

密碼郵箱

效果圖:

(5)什麼是載入事件

js**執行時候,需要html&css的支援

,就讓html先執行(先進入記憶體),js**後執行

js**在最

後執行的過程就是「載入過程」,通常通過「載入事件」實現載入過程

具體設定: 」

載入函式()

」>

window.onload = 匿名/有名函式;  //推薦

第一種載入方式:

操作載入事件

效果圖:

第二種載入方式:

操作載入事件

效果圖:

第三種:匿名靈活使用

操作載入事件

效果圖:

javascript 事件物件

btn.onclick function event 屬性 用途clientx 游標相對於該網頁的水平位置 clienty 游標相對於該網頁的垂直位置 type 事件的型別 target 該事件被傳送到的物件 screenx 游標相對於該螢幕的水平位置 screeny 游標相對於該螢幕的垂直位置 p...

JavaScript事件event物件屬性

ie和ff獲取事件的不同 var e window.event e.target event 物件只在事件發生的過程中才有效。阻止事件預設行為 ie window.event.returnvalue true ff e.preventdefault 阻止事件冒泡行為 ie window.event....

Javascript事件物件 滑鼠拖動例項

window.event 屬性 1.srcelement 獲取事件源 2.keycode 獲取鍵盤資訊 3.clientx,clienty,滑鼠相對於視窗左上角的座標 4.screenx,screeny 滑鼠相對於螢幕左上角的座標 5.returnvalue 事件返回值 6.cancelbubble...