js之【窗口事件和event对象】（有一个追踪鼠标定位的小栗子）

最新推荐文章于 2023-03-30 12:00:00 发布

叫我邱球球

最新推荐文章于 2023-03-30 12:00:00 发布

阅读量1k

点赞数 1

分类专栏：有关javascript

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/70766856

版权

有关javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、窗口事件练习：

窗口事件有两种写法：

①写在script标签中，即：

<script>
window.onload = init;
</script>

当写在script中时，window.onload = 函数名。

注意：此时，函数名后一定不要加括号()

②写在body标签里边，即

<body onload = init()></body>

当写在body标签里时，onload = 函数名();

注意：此时，函数名后要加上括号()。

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>窗口事件</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        window.onload = init;//窗口事件
        function init(){
            alert('这是窗口事件');
        }
    </script>
</head>
<body>
abdc
</body>
</html>

此时，只有当窗口事件执行成功后，才能在页面上显示“ abdc”。

--------------------------------------------分割线----------------------------------------

event事件：可以获取鼠标坐标。

注意：event只能以实参的形式来进行利用。

下面我们写一个可以追踪鼠标所在的坐标的小程序：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>移动瞄准案例</title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 1000px;
            height: 200px;
            border: solid red;
        }
    </style>
    <script type="text/javascript">
function fn(e) {
    var obj = document.getElementById("d1");
    var x = e.clientX;
    var y = e.clientY;
    obj.innerHTML ="坐标" + x + ','+ y;
//    if(fm()){
//        obj.innerHTML="鼠标已出框";
//    }
}
function fm(){
    var obj = document.getElementById("d1");
    obj.innerHTML="鼠标已出框";
}
    </script>
</head>
<body>
<div οnmοusemοve="fn(event)"  οnmοuseοut="fm()" id="d1">
</div>
</body>
</html>

通过上面的小栗子来消化吸收一下~

每天进步一点点~

叫我邱球球

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之【窗口事件和event对象】（有一个追踪鼠标定位的小栗子）

一、窗口事件练习：窗口事件有两种写法：①写在script标签中，即：window.onload = init;当写在script中时，window.onload = 函数名。注意：此时，函数名后一定不要加括号()②写在body标签里边，即当写在body标签里时，onload = 函数名();注意：此时，函数名后要加上括号()。例如：
复制链接

扫一扫