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