JavaScript事件對象中Event屬性的簡單使用

Event屬性可以幫到你!!!

開發工具與關鍵技術：DreamWeaver     Event屬性 
作者:聽民謠的老貓
撰寫時間：2019/1/16 15:30

在JavaScript學習過程中接觸到的Event屬性，在後期學習中對Event屬性的簡單使用和理解
你在前端學習過程中有想過鼠標點哪裏某個div或者某張圖片就出現在哪裏，某個div或者某張圖片跟着鼠標移動，通過按下某個鍵盤來達到你的某個想法???

Event屬性可以幫到你!!!
每一個事件的觸發會產生相應的事件對象（事件對象只有在事件發生時纔會產生，手動創建是不存在的! ），Event屬性。Event屬性的作用是用來記錄事件發生產生的一些相關信息。

那如何訪問到Event屬性?

         <script>
	          window.onclick=function(e）
	          {
		         var e = event||window.event;(定義一個變量來獲取事件對象，解決兼容性問題)
		         console.log(e);
	          };
         </script>
         

如上代碼，構建onclick事件，通過console.log()訪問到onclick事件中相應Event屬性值。（注意在事件函數外面是訪問不到事件產生的Event屬性值的） 在每一次觸發事件都會產生相應Event屬性值。

上面的圖片就是通過console.log()訪問到onclick事件中相應Event屬性值，這些屬性值包括事件被觸發時，鼠標指針的垂直和水平座標(clientY，clientX)。某個鍵盤按鍵被按下(onkeydown)…

合理的運用這些屬性就可以簡單實現你的一些小想法!!!

        <div class="box" id="box"></div>
        <script>
	         var box= document.getElementById("box");
	         window.onclick=function(e)
	         {
		     var e = event||window.event;
		     box.style.top=parseInt(e.clientY)-150+"px";
		     box.style.left=parseInt(e.clientX)-150+"px"
         	};
     <-幾行簡單的代碼就可以實現鼠標點哪div就在哪，試試?->
</script>

• 代碼調試
  

下面爲各位看官奉上每個屬性的描述:

屬性	描述
onabort	圖像的加載被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點擊某個對象時調用的事件句柄。
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素獲得焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下並鬆開。
onkeyup	某個鍵盤按鍵被鬆開。
onload	一張頁面或一幅圖像完成加載。
onmousedown	鼠標按鈕被按下。
onmousemove	鼠標被移動。
onmouseout	鼠標從某元素移開。
onmouseover	鼠標移到某元素之上。
onmouseup	鼠標按鍵被鬆開。
onreset	重置按鈕被點擊。
onresize	窗口或框架被重新調整大小。
onselect	文本被選中。
onsubmit	確認按鈕被點擊。
onunload	用戶退出頁面。
altKey	返回當事件被觸發時，“ALT” 是否被按下。
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，“CTRL” 鍵是否被按下。
metaKey	返回當事件被觸發時，“meta” 鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，“SHIFT” 鍵是否被按下。
bubbles	返回布爾值，指示事件是否是起泡事件類型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。
currentTarget	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
target	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
type	返回當前 Event 對象表示的事件的名稱。