每日学到 45 - JavaScript事件

iiiiiiiiiiice

已于 2022-09-21 20:25:38 修改

阅读量232

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端 css html5

于 2022-09-21 20:25:25 首次发布

本文链接：https://blog.csdn.net/m0_52588421/article/details/126979802

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.绑定事件方法

    1）标签直接设置事件
       <button οnclick="show()">点击</button>
          function show() {
        alert('一');
    }

    2）获取元素，添加事件
            var btn = document.querySelector('button');
    btn.ondblclick = function () {
        alert('二');
    }

    3）获取元素，添加一个或多个事件
            btn.addEventListener('mouseover', function () {
        alert('三');
    });

2.鼠标事件

onclick
鼠标点击某个对象

ondblclick
鼠标双击某个对象

onmouseover
鼠标被移到某元素之上

onmouseout
鼠标从某元素移开

onmousedown
某个鼠标按键被按下

onmousemove
鼠标被移动

onmouseup
某个鼠标按键被松开

3.表单事件

onfocus
元素获得焦点

onblur
元素失去焦点

onchange
用户改变域的内容

onreset
表单重置时触发

onsubmit
表单提交时触发

4.键盘事件

onkeydown
某个键盘的键被按下

onkeypress
某个键盘的键被按下并释放一个键时发生

onkeyup
某个键盘的键被松开

5.框架/对象事件

onload
某个页面或图像被完成加载

onresize
窗口或框架被调整尺寸

onscroll
当文档被滚动时发生的事件

6.九宫格转动抽奖

<!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 auto;
            padding: 0;
        }

        .wrap {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .option {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: rgb(0, 166, 255);
            text-align: center;
            line-height: 100px;
            float: left;
            position: absolute;
        }

        .btn {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: rgb(0, 166, 255);
            float: left;
            text-align: center;
            line-height: 100px;
            position: relative;
            top: 125px;
            left: 125px;
        }

        #div1 {
            position: absolute;
            left: 125px;
            top: 0;
        }

        #div2 {
            position: absolute;
            left: 250px;
            top: 0;
        }

        #div3 {
            position: absolute;
            left: 250px;
            top: 125px;
        }

        #div4 {
            position: absolute;
            left: 250px;
            top: 250px;
        }

        #div5 {
            position: absolute;
            left: 125px;
            top: 250px;
        }

        #div6 {
            position: absolute;
            left: 0;
            top: 250px;
        }

        #div7 {
            position: absolute;
            left: 0;
            top: 125px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="option" id="div0">罚100</div>
        <div class="option" id="div1">罚200</div>
        <div class="option" id="div2">罚300</div>
        <div class="option" id="div3">罚400</div>
        <div class="btn">&nbsp;
            <button class="start">开始</button>
            <button class="stop">停止</button>
        </div>
        <div class="option" id="div4">罚500</div>
        <div class="option" id="div5">罚600</div>
        <div class="option" id="div6">罚700</div>
        <div class="option" id="div7">奖800</div>
    </div>

</body>
<script>
    var startBtn = document.querySelector('.start');
    var stopBtn = document.querySelector('.stop');
    var optionEle = document.querySelectorAll('.option');
    var index = 0;
    var count = 0;
    var startInterval;
    function start() {
        init();
        optionEle[index].style.backgroundColor = '#ccc';
        if (index == optionEle.length - 1) {
            index = 0;
        } else {
            index++;
        }
    }
    function init() {
        for (var i = 0; i < optionEle.length; i++) {
            optionEle[i].style.backgroundColor = 'rgb(0, 166, 255)';
        }
    }
    startBtn.onclick = function () {
        clearInterval(startInterval);
        startInterval = setInterval(start, 200);

    }
    stopBtn.onclick = function () {
        clearInterval(startInterval);
    }
</script>

</html>