10.①事件类型、②事件对象event的属性和方法③案例：显示X轴Y轴坐标④案例：鼠标移动小方块随之移动③案例小方块虽键盘上下左右移动⑤定时器

click：单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown：当用户按下鼠标还未弹起时触发；

mouseup：当用户释放鼠标按钮时触发；

mouseover：当鼠标移到某个元素上时触发；

mouseout：当鼠标移出某个元素上时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

contextmenu：点击鼠标右键出现菜单的事件，它默认弹出菜单如下：取消用event.preventDefault();

wheel：鼠标滚轮事件 ----获取滚轮的垂直滚动方向：event.deltaY; 向下正，向上负。 ----获取滚轮的水平滚动方向：event.deltaX; 向右正，向左负

blur : 表单失去焦点

第2种：键盘事件。

键盘事件只能绑定给可以获取焦点的元素或document

keydown：当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

keyup：当用户释放键盘上的键触发；

keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

event.key 判断用户输入的是哪个键

①keydown演示

②判断用户按下的的是不是k

③判断用户是否同时按下k键和ctrl

④shift和alt

第3种：HTML事件。

load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；

unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

select：当用户选择文本框（input或textarea）中的一个或多个字符触发；

change：当文本框（input或textarea）内容改变且失去焦点后触发；

input：输入；

focus：当页面或者元素获得焦点时在window及相关元素上面触发；

blur：当页面或元素失去焦点时在window及相关元素上触发；

submit：当用户点击提交按钮在<form>元素上触发；

reset：当用户点击重置按钮在<form>元素上触发；

resize：当窗口或框架的大小变化时在window或框架上触发；

scroll：当用户滚动带滚动条的元素时触发；

以上就是这三种事件类型，千万记住事件之前要加“on”；

二：案例：按键盘上下左右，小方块上下左右移动（楼下定时器优化版本）需要优化的问题：上一个案例第一次执行和第二次执行中间有卡顿

    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box')
        document.addEventListener('keydown', function (event) {
            // console.log(event.key)
            //上ArrowUp
            //下ArrowDown
            //左ArrowLeft
            //右ArrowRight
            switch (event.key) {
                case 'ArrowUp':
                case 'Up':
                    box.style.top = box.offsetTop - 10 + 'px';
                    break;
                case 'ArrowDown':
                case 'Down':
                    box.style.top = box.offsetTop + 10 + 'px';
                    break;
                case 'ArrowLeft':
                case 'Left':
                    box.style.left = box.offsetLeft - 10 + 'px';
                    break;
                case 'ArrowRight':
                case 'Right':
                    box.style.left = box.offsetLeft + 10 + 'px';
                    break;

            }

        })
    </script>
</body>

三：定时器（延时调用）

1.延时调用setTimeout(回调函数，时间毫秒)

①延时调用开启

②延时调用关闭 clearTimeout(id名);

2.定时调用setInterval(回调函数，每隔多少毫秒执行一次)

①定时调用开启

②定时调用关闭 clearInterval(id名);每一个定时器都会返回一个定时器的唯一id

3.setTimeout和setInterval可以相互转换，如下setTimeout变setInterval

4.尽量不要用setInterval

原因如下：①setInterval无视代码错误

setInterval有个讨厌的习惯，即对自己调用的代码是否报错这件事漠不关心。换句话说，如果setInterval执行的代码由于某种原因出了错，它还会持续不断（不管不顾）地调用该代码

②setInterval无视网络延迟

setInterval有个讨厌的习惯，即对自己调用的代码是否报错这件事漠不关心。换句话说，如果setInterval执行的代码由于某种原因出了错，它还会持续不断（不管不顾）地调用该代码。

③setInterval不保证执行

假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据（注意：如果你真的这么做了，那恐怕你做错了；建议使用“补偿性轮询”（backoff polling）[1]）。而由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setInterval不在乎。它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。

四：案例优化：上下左右小方块移动

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        /*
       *给document绑定了keydown事件，按键每次按下元素就会移动一次，
          如果连续按着某个按键不松手，则事件会持续触发，元素会一直移动
          但是由于计算机的防误输入的机制，第一次事件触发和第二次事件触发的间隔比较长，
          这就导致元素的运动发生卡顿现象
       *需要优化的问题：上一个案例第一次执行和第二次执行中间有卡顿 
       *物体的运动由以下决定：
              方向
              速度
        */
        let box = document.getElementById('box')
        /* 创建一个变量，表示元素的运动方向 */
        var s = null;
        /*  设置定时器,来控制元素的运动速度  */
        setInterval(function () {
            //上ArrowUp    Up
            //下ArrowDown  Down
            //左ArrowLeft  Left
            //右ArrowRight Right
            switch (s) {
                case 'ArrowUp':
                case 'Up':
                    box.style.top = box.offsetTop - 10 + 'px';
                    break;
                case 'ArrowDown':
                case 'Down':
                    box.style.top = box.offsetTop + 10 + 'px';
                    break;
                case 'ArrowLeft':
                case 'Left':
                    box.style.left = box.offsetLeft - 10 + 'px';
                    break;
                case 'ArrowRight':
                case 'Right':
                    box.style.left = box.offsetLeft + 10 + 'px';
                    break;

            }
        }, 30)
        document.addEventListener('keydown', function (event) {
            // console.log(event.key)
            s = event.key;
        })
        document.addEventListener('keyup', function (event) {
            s = null;
        })
    </script>

五：事件对象event：

1.event：当事件的响应函数触发时，我们的浏览器每次都会传递一个对象作为回调函数的实参。

我们在事件的回调函数中定义一个形参event（或者其他字母也可）看看浏览器有没有默认传递参数，里面果然有一个实参弹出了[object MouseEvent] 这个实参就是事件对象，

2.事件对象里面存储了所有当前事件的相关信息比如：事件是谁触发、触发时哪个按键被按下、触发时鼠标的坐标...

3.鼠标移动时打印event看看：

4.事件对象的常见属性和方法

5.event.target和this指向的问题

六：案例：显示X、Y轴坐标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #a1 {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }

        #a2 {
            margin-top: 20px;
            width: 400px;
            height: 50px;
            border: 1px solid black;

        }
    </style>
    <script>
        window.onload = function () {
            let a1 = document.getElementById('a1')
            let a2 = document.getElementById('a2')
            let aHeight = a1.clientHeight;
            /* 当事件的响应函数触发时，我们的浏览器每次都会传递一个对象作为回调函数的实参
                             我们在function里面写一个event看看浏览器有没有默认传递参数
                             里面果然有一个实参 弹出了[object MouseEvent] 这个实参就是事件对象，
               事件对象里面存储了所有当前事件的相关信息
                         比如：事件是谁触发、触发时哪个按键被按下、触发时鼠标的坐标...
                         */
            a1.onmousemove = function (event) {
                // console.log('我移动了')
                // console.log(aHeight)
                // a2.innerHTML = 'x=44 ，y=77'

                // alert(event)  //弹出了一个 [object MouseEvent]
                // console.log(event) //我们在控制台把他打印出来

                //获取event里面存储的当前鼠标坐标
                let x = event.clientX;
                let y = event.clientY;
                //显示坐标
                a2.innerHTML = 'x=' + x + ' ，y=' + y;


            }
        }
    </script>
</head>

<body>
    <div id="a1"></div>
    <div id="a2"></div>
</body>

</html>

七：案例：鼠标移动小方块随之移动

①解决方法：1.把小方块的position设置为fixed固定定位根据浏览器窗口定位，此时偏移参照点和浏览器可视窗口一致

②解决方法：2.我们之前使用的event.clientX/Y是参照于视口获取的X/Y轴坐标，我们修改成参照与浏览器获取的X/Y轴坐标 let x = event.pageX;let y = event.pageY;

③解决方法：3.把小方块坐标原点设置为：偏移量加滚动条已滚动距离

是根元素的滚动距离 let gY = document.documentElement.scrollTop;

然后修改距上偏移量 a.style.top = y + gY + 'px';

水平同理

④代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }

        #a {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 解决方法1 */
            position: fixed;
            /* 解决方法2 */
            /* position: absolute; */
        }
    </style>
    <script>
        window.onload = function () {
            let a = document.getElementById('a')
            //给document设置鼠标移动事件
            document.onmousemove = function (event) {
                // console.log('我移动了')
                //解决方法1.鼠标参照可视窗口获取X/Y轴坐标 此时position: fixed;
                let x = event.clientX;
                let y = event.clientY;
                a.style.left = x + 'px';
                a.style.top = y + 'px';

                /*          //解决方法2.鼠标参照浏览器获取X/Y轴坐标 此时 position: absolute;
                         let x = event.pageX;
                         let y = event.pageY;
                         a.style.left = x + 'px';
                         a.style.top = y + 'px'; */

                /*          //解决方法3.可视窗口内x/y轴偏移量分别加上滚动条已滚动距离 此时position: absolute;
                         //是根元素的滚动距离
                         let gY = document.documentElement.scrollTop;
                         let x = event.clientX;
                         let y = event.clientY;
                         // console.log(x)
                         // console.log(y)
         
                         a.style.left = x + 'px';
                         a.style.top = y + gY + 'px'; */
            }

        }
    </script>
</head>

<body>
    <div id="a"></div>
</body>

</html>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
10.①事件类型、②事件对象event的属性和方法③案例：显示X轴Y轴坐标④案例：鼠标移动小方块随之移动③案例小方块虽键盘上下左右移动⑤定时器

目录一：事件：JavaScript可以处理的事件类型为：鼠标类型、键盘类型和HTML类型！第1种：鼠标事件。第2种：键盘事件。第3种：HTML事件。二：鼠标移动事件：document.onmousemove=function(event){}三：案例：显示X、Y轴坐标四：案例：鼠标移动小方块随之移动①解决方法：1.把小方块的position设置为fixed固定定位根据浏览器窗口定位，此时偏移参照点和浏览器可视窗口一致②解决方法：2.我们之前使用的ev...
复制链接

扫一扫