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    元素的值一旦发生改变就立即触发