javascript-事件对象

javascript-事件对象

一、事件对象

用来记录一些事件发生时的相关信息的对象

1.只有当事件发生的时候才能产生，只能在处理函数内部访问
2.处理函数结束后自动销毁

二、获取事件

window.event(IE)
event(火狐)
虽然是全局的属性，但是只能在函数内部访问。(因为它不记录任何信息，只有当事件发生的时候，它才会记录信息)

对象.on事件=function(e){
}

兼容写法

window.onload=function(e){
    var ev=e||window.event;
    document.write(ev);
}

三、事件对象的属性

3.1关于鼠标事件的事件对象

相对于浏览器位置的

clientX当鼠标事件发生的时候,鼠标相对于浏览器x轴的位置
clientY当鼠标事件发生的时候,鼠标相对于浏览器y轴的位置

<div id="box" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
<script>
    //获取鼠标相对于浏览器的位置
    var box=document.getElementById("box");
    document.onmouseover=function (e) {
        var ev=e||window.event;
        var cx=ev.clientX;
        var cy=ev.clientY;
        box.innerHTML="clientX:"+cx+" clientY:"+cy;
    }
</script>

相对于屏幕位置的

screenX当鼠标事件发生的时候，鼠标相对于屏幕x轴的位置
screenY当鼠标事件发生的时候，鼠标相对于屏幕y轴的位置

<div id="box" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
<script>
    //获取鼠标相对于屏幕的位置
    var box=document.getElementById("box");
    document.onmouseover=function (e) {
        var ev=e||window.event;
        var sx=ev.screenX;
        var sy=ev.screenY;
        box.innerHTML="screenX:"+sx+" screenY:"+sy;
    }
</script>

相对于事件源的位置的

(IE)
offsetX当鼠标事件发生的时候，鼠标相对于事件源x轴的位置
offsetY当鼠标事件发生的时候，鼠标相对于事件源y轴的位置
(火狐)
layerX当鼠标事件发生的时候，鼠标相对于事件源x轴的位置
layerY当鼠标事件发生的时候，鼠标相对于事件源y轴的位置

<div id="box" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
<script>
    //获取鼠标相对于事件源的位置
    var box=document.getElementById("box");
    document.onclick=function (e) {
        var ev=e||window.event;
        var x=ev.offsetX||ev.layerX;
        var y=ev.offsetY||ev.layerY;
        box.innerHTML="x:"+x+" y:"+y;
    }
</script>

3.2关于键盘事件的事件对象

keyCode获得键盘码

常用键盘码
空格 32
回车 13
ctrl 17
alt 18
左 37 上 38 右 39 下 40

altKey判断alt键是否被按下 按下是true,反之是false
ctrlKey判断ctrl键是否被按下 按下是true,反之是false
shiftKey判断ctrl键是否被按下 按下是true,反之是false
type用来检测事件的类型 主要是用于多个事件通用同一个事件处理程序的时候

<div id="box" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
<script>
    //获取键盘码
    var box=document.getElementById("box");
    document.onkeydown=function (e) {
        var ev=e||window.event;
        box.innerHTML="键盘码: "+ev.keyCode;
    }
</script>

    if(ev.altKey){
        alert("alt键被按下");
    }

<div id="box" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
<script>
    //获取键盘码
    var box=document.getElementById("box");
    document.onkeydown=function (e) {
        var ev=e||window.event;
        box.innerHTML="事件为: "+ev.type;

    }
</script>