事件对象event

最新推荐文章于 2022-10-07 20:42:08 发布

Chaney__Chen

最新推荐文章于 2022-10-07 20:42:08 发布

阅读量327

点赞数

分类专栏： web前端文章标签： event事件对象 javascript 前端开发

本文链接：https://blog.csdn.net/Chaney__Chen/article/details/53912000

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM 0级或者DOM 2级），都会传入event对象。

var oBtn = document.getElementById("myBtn");
//DOM 0
oBtn.onclick = function (event){
    alert(event.type);//"click"
};

//DOM 2
oBtn.addEventListener("click",function(){
    alert(event.type);//"click"
},false);

2.IE中的事件对象

IE中的事件对象，在使用DOM 0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

var oBtn = document.getElementById("myBtn");
oBtn.onclick = function(){
    var event = window.event;
    alert(event.type);//"click"
}

3.兼容

小Demo，点击获取box盒子获取点击坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最大事件源</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background:red;
            margin:100px auto;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById('box');
    //使用最大事件源来点击
    //最大事件源是document
    document.onclick = function (e) {
        //为什么不是var e = e || window.event呢？
        var e = e||event;
        box.innerHTML = e.clientX+'<br>'+e.clientY;
    }
</script>
</body>
</html>