javaScript知识点回顾（三十九）：DOM中Event对象

最新推荐文章于 2022-04-25 08:00:00 发布

BCS-点心

最新推荐文章于 2022-04-25 08:00:00 发布

阅读量177

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/zhangxin0w0/article/details/80598336

版权

JavaScript基础专栏收录该内容

43 篇文章 1 订阅

订阅专栏

DOM中引入Event对象(DOM浏览器就是标准浏览器)

（1）通过HTML标记的事件属性来传递event对象

在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。

该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            //在HTML中，如何通过事件来传递event对象参数
            function get(e){
                //获取单击时，距离窗口左边和上边的距离
                alert(e.clientX+","+e.clientY);
            }     
        </script>
    </head>
    <body style="margin:0px">
        <img width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" οnclick="get(event)" />
    </body>
</html>

（2）使用元素对象的事件属性来传递event对象

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            window.onload = function(){
                //获取id=img1的图片对象
                var imgObj=document.getElementById("img1");
                //增加onclick事件
                imgObj.οnclick=get;
            }
            //不能传event参数，但形参必须接收
            //第一个形参，一定是event对象
            function get(e){
                //获取单击时，距离窗口左边和上边的距离
                alert(e.clientX+","+e.clientY);
            }    
        </script>
    </head>
    <body style="margin:0px">
        <img id="img1" width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
    </body>
</html>

DOM中Event对象属性

type：当前的事件类型
clientX和clientY：距离窗口左边和上边的距离
pageX和pageY：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            function get(e)
            {
                //获取单击时，相关坐标信息
                var str = "窗口左边距离："+e.clientX+"，窗口顶边距离："+e.clientY;
                str += "\n网页左边距离："+e.pageX+"，网页顶边距离："+e.pageY;
                str += "\n屏幕左边距离："+e.screenX+"，屏幕顶边距离："+e.screenY;
                str += "\n事件类型："+e.type;
                window.alert(str);
            }    
        </script>
    </head>
    <body style="margin:0px">
        <img id="img1" width="400" src="http://img.php.cn/upload/course/000/000/009/580af7f52278b486.jpg" οnclick="get(event)" />
    </body>
</html>