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