Event 事件类型-基本类型

最新推荐文章于 2024-01-12 11:32:28 发布

余生94ww

最新推荐文章于 2024-01-12 11:32:28 发布

阅读量729

点赞数

文章标签： javascript ui 前端

本文链接：https://blog.csdn.net/ww_Filling_it/article/details/124908233

版权

UI事件（不一定与用户操作有关的事件）
- load当页面完全加载后在window上触发图片也可以触发load事件
- resize当窗口大小变化时在window上触发
  - (除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才触发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件)
- scroll当用户滚动带滚动条的元素中的内容时，在该元素上面触发
鼠标事件
- 事件类型
  - onclick（单击）
  - ondblclick（双击）
  - oncontextmenu（右键菜单）
  - onmouseover 移入
  - onmouseout 移出
  - onmouseenter 移入
  - onmouseleave 移出
  - 建议使用enter和leave
  - 因为over和out在进入移出子级标签时会触发
  - onmousedown（按下）
  - onmouseup（抬起）
  - onmousemove（移动）
  - 事件对象：包含了该事件所有的相关信息
  - d1.onclick = function（e）{} e：事件对象
- 坐标位置
  - screenX 在屏幕中的x坐标
  - screenY 在屏幕中的y坐标
  - 相对于body
    - clientX 表示事件发生时鼠标指针在视口中的水平坐标（不包含滚动距离）
    - clientY 在视口中的垂直坐标
    - IE没有（不建议使用，但等于上面二者）
      - pageX 在页面中的x坐标（包含滚动距离）
      - pageY 在页面中的y坐标
  - 获取点击目标的坐标（有兼容性）
    - offsetX offsetY
  - clientX-offsetLeft
键盘事件
- keydown当用户按下键盘上的任意键时触发，按住不动将重复触发
- keyup当用户释放键盘上的键时触发
  - event.keyCode 键码
- keypress当用户按下键盘上的字符键时触发，按住不动重复触发
  - event.charCode 键码
    - event.charCode键码(ASCIl编码形式展示,需通过String.fromCharCode()方法转换,lE9以下不支持)
- shiftkey，altkey，ctrlkey
- 补充：e.keycode 键码值，判断按键的标准
表单事件
- focus元素获得焦点时触发
- blur元素失去焦点时触发
- submit（）提交表单
- change当input、textarea元素value值改变且失去焦点时，select元素选项改变时触发
- input当input、textarea元素value值改变同步触发事件，select元素选项改变时触发
  - 有兼容问题
阻止冒泡
- fn stoppropagation() 非IE
- pro cancelBubble = true IE
阻止默认
- fn preventDefault() 非IE
- pro returnValue = true IE

案例：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-image: url(https://img1.baidu.com/it/u=103880656,1409660226&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            background-size: 100% 100%;
        }

        .keys {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 120px;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 60px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            margin-left: -300px;
        }

        @font-face {
            font-family: 'arraw';
            src: url(../day_9/font/iconfont.ttf);
        }

        .keys p {
            font-family: 'arraw';
            font-size: 60px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #fff;
        }

        .levle {
            font-size: 50px;
            color: #fff;
        }

        .keys .ok {
            color: gold;
            text-shadow: 0 0 5px tomato;
        }
    </style>
</head>

<body>
    <div class="keys">
        <!-- <p>&#xeb0b;</p> -->
    </div>
    <p class="levle">关卡
        <span id="level">1</span>
    </p>
</body>
<script>
    var dKeys = document.querySelector(".keys");
    var spanLevel = document.querySelector("#level");
    var level = 1;  //关卡
    var now = 0;   //点前点击的按键所对应的箭头下标

    //键盘事件
    window.onkeydown = function (e) {
        //获取所有的箭头标签
        var arraws = dKeys.children;
        //空格 确认结果

        var le = level > 25 ? 25 : level;
        if (now === le && e.keyCode === 32) {
            //全按对了
            level++;
            spanLevel.innerHTML = level++;
            now = 0;
            setKeys();
        }

        if (e.keyCode === arraws[now].keyIndex) {
            //按对了
            arraws[now].className = 'ok';
            now++;
        } else {
            //按错了 从头开始
            for (i = now - 1; i >= 0; i--) {
                //把之前的按对的按钮样式去掉
                arraws[i].className = '';
            }
            now = 0;
        }
    }

    //生成箭头的函数
    function setKeys() {
        //每次进来，清空箭头
        dKeys.innerHTML = '';
        //箭头的数据源
        var arr = ['&#xeb09;', '&#xeb0b;', '&#xeb08;', '&#xeb0a;'];
        var ki = [37, 38, 39, 40]; //对应的keyCode
        //最多生成10个箭头
        var le = level > 25 ? 25 : level;
        for (var i = 0; i < le; i++) {
            var index = rand(0, 4);
            //生成arraw
            var p = document.createElement("p");
            p.innerHTML = arr[index];
            p.keyIndex = ki[index]; //方便和e.keyCode进行对比
            dKeys.appendChild(p);
        }
        // var index = rand(0, 4);
    }
    setKeys();
    //随机函数
    function rand(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
</script>

</html>