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

来源：互联网发布：莎莎官网app网络慢编辑：程序博客网时间：2024/05/16 05:48

一、窗口事件练习：

窗口事件有两种写法：

①写在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 onmousemove="fn(event)"  onmouseout="fm()" id="d1"></div></body></html>

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

每天进步一点点~

0 0