01JavaScript事件——事件對象、鼠標事件、鍵盤事件、表單事件

事件對象

event事件對象：包含着所有的與事件有關的操作，所有瀏覽器都支持event對象，event對象會轉入DOM0級、DOM2級、HTML指定定事件內置對象，可在事件處理函數內直接使用，event,在事件處理程序中有效，事件執行完成自動銷燬

兼容問題：在所有支持DOM2級事件處理程序的瀏覽器中，event是內置對象，可以直接拿來使用，IE8及其以前的版本不兼容DOM2級，event並不是內置的事件對象，但兼任DOM0級使用window.event作爲事件對象

wrap.onclick=function(e){
	// 事件對象的兼容處理
	var e=e||window.event;
	// 會輸出事件的類型"click"
	console.log(e.type)
	// 輸出事件的觸發者
	console.log(e.target)
}

鼠標事件

    單擊onclick 雙擊ondblclick 
    右鍵菜單oncontextmenu 按下onmousedown 擡起onmouseup
    移入onmouseover  移出onmouseout
    移入onmouseenter 移出onmouseleave 移動onmousemove

    over/out  enter/leave

     1、前者比後者先執行

     2、前者支持事件冒泡，後者不支持

當鼠標觸發的時候，我們可以通過事件對象event來獲取鼠標座標位置,計量單位是px

	document.onclick=function(e){
		var e=e||window.event;
		 
		// 1、相對於顯示器屏幕的鼠標座標,座標原點位於屏幕左上角
		// screenX/screenY，number
		document.write("screenX:"+e.screenX+",screenY:"+e.screenY)

		document.write("<br>")
		// 2、獲取相對於可是窗口的座標位置
		// clientX/clientY
		document.write("clientX:"+e.clientX+",clientY:"+e.clientY)

		document.write("<br>")
		// 3、獲取相對於整個頁面的座標位置
		// pageX/pageY  IE 6、7、8不支持 page=client+scrollTop
		document.write("pageX:"+e.pageX+",pageY:"+e.pageY)
	}

鍵盤事件

onkeydown 摁下任意鍵觸發，不釋放持續觸發

onkeyup 擡起/釋放觸發

onkeypress 摁下字符觸發，區分字符大小寫

三個特殊鍵位：altKey ctrlKey shiftKey

	document.onkeypress=function(e){
		var e=e||window.event;
		// 可以通過鍵盤事件的event對象來獲取按鍵的簡直編碼
		console.log(e.keyCode)
		// 通過方法，String.fromCharCode()將鍵值編碼轉換成對應的按鍵內容，最好在onkeypress裏面使用,IE9以下不支持
		console.log(String.fromCharCode(e.keyCode))
	}

表單事件

onfocus()表單元素獲得焦點時自動觸發 

onblur()表單元素失去焦點時自動觸發 

onchange()表單元素值發生改變後自動觸發 ，1、元素先失去焦點  2、值發生改變

oninput()表單元素的value的值發生改變時自動觸發，有兼容問題IE:onpropertychange非IE:oninput    元素的值一旦發生改變就立即觸發