javascript-事件对象

2020-01-12 本文已影响0人 ssttIsme

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>

javascript-事件对象