HTML DOM事件

事件：允许js在html文档元素注册不同的事件处理程序，驱动函数/方法

鼠标事件
键盘事件
表单事件
剪切板事件
拖拽事件
打印事件
媒体事件
框架事件
动画事件
过渡事件

鼠标事件

鼠标点击事件

onclick 鼠标左键点击触发
ondblclick 鼠标左键双击触发
onmousedown 鼠标按键按下时触发（左中右键均可以）
onmouseup 鼠标按键松开时触发（左中右键均可以）

鼠标移动事件

onmouseover 鼠标悬浮在元素上面时触发（如果从父元素再进入子元素，会再次触发）
onmouseout 鼠标离开元素上面时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都会再次触发）

onmouseenter 鼠标进入元素时触发（如果从父元素再进入子元素，不会再次触发）
onmouseleave 鼠标离开元素时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都不会再次触发）

onmousemove 鼠标移动时触发
onmousewheel 鼠标滚轮事件，已废弃，由onwheel代替
onwheel 鼠标滚轮事件，鼠标滚轮出现动作以后触发
oncontextmenu 鼠标右键菜单事件，鼠标点击右键时触发

  .box{
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid;
            margin: 10px auto;
            background-color: rgb(220, 158, 76);
            color: white;
        }

    <div class="box">onclick</div>
    <div class="box">ondblclick</div>
    <div class="box">onmousedown</div>
    <div class="box">onmouseup</div>
    <div class="box">onmouseover</div>
    <div class="box">onmouseout</div>
    <div class="box">onmouseenter</div>
    <div class="box">onmouseleave</div>
    <div class="box">onmousemove</div>
    <div class="box">onmousewheel</div>
    <div class="box">onwheel</div>
    <div class="box">oncontextmenu</div>

  var aBoxs = document.getElementsByClassName('box');

        // onclick
        aBoxs[0].onclick = function(e){
            console.log('onclick事件');  // onclick事件
            console.log(e);  // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
        }

        aBoxs[1].ondblclick = function(e){
            console.log('ondblclick事件');
            console.log(e);    
        }

        aBoxs[2].onmousedown = function(e){
            console.log('onmousedown事件');
            console.log(e);    
        }

        aBoxs[3].onmouseup = function(e){
            console.log('onmouseup事件');
            console.log(e);    
        }

        aBoxs[4].onmouseover = function(e){
            console.log('onmouseover事件');
            console.log(e);    
        }

        aBoxs[5].onmouseout = function(e){
            console.log('onmouseout事件');
            console.log(e);    
        }

        aBoxs[6].onmouseenter = function(e){
            console.log('onmouseenter事件');
            console.log(e);    
        }

        aBoxs[7].onmouseleave = function(e){
            console.log('onmouseleave事件');
            console.log(e);    
        }

        aBoxs[8].onmousemove = function(e){
            console.log('onmousemove事件');
            console.log(e);    
        }

        aBoxs[9].onmousewheel = function(e){
            console.log('onmousewheel事件');
            console.log(e);    
        }

        aBoxs[10].onwheel = function(e){
            console.log('onwheel事件');
            console.log(e);    
        }

        aBoxs[11].oncontextmenu = function(e){
            console.log('oncontextmenu事件');
            console.log(e);    
        }

总结

今天所学习的内容并不多，只是了解了一下鼠标的一些事件，对于它的针对性的练习也没有，不过在我看来，对于鼠标事件的一些应用应该会比较容易上手。
接着说说今天作业的情况，今天有个作业是写个老虎机样式的抽奖的功能，
我现在复盘一下js部分：

首先我们要做到的是，点击按钮能让一个小方块的样式发生改变，我们可以通过点击修改类名的方式实现。
在点击一下可以改变小方块的样式的基础上，添加一个循环定时器，通过鼠标点击事件去调用，定时器里的内容就是让每个小方块的样式挨个改变，这样我们就实现了点击按钮，实现老虎机的一个效果
接着我们要做的就是点击完以后，循环定时器能够在一定的时间内清除掉，那么我就想到了延时定时器，在点击按钮时，同时执行延时定时器，时间到以后，就清除循环定时器（clearInterval（定时器的名称））
现在我们也做到了点击按钮，画面动起来，并且会在一段时间后停止，但是它持续的时间总是一样的，那么这时候延时定时器的执行时间就要用到我们的Math的random（随机数）方法了，最后通过一系列的操作，最终完成了本次的作业

虽然说这次作业我也做出来了，但是花了我很多的时间，在总体的大结构上没有太大的问题，就是一些细节方面出现了很多的失误，出现了解决掉一个问题以后，又冒出一个问题的情况。
所以说js是相对严谨一点的语言，它的标点、顺序都是需要我们去用心的，不能刷小聪明，为了一时的方便，浪费更多的时间。现在把代码分享出来
css代码

   * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 200px;
            margin: 150px auto;
        }

        li {
            width: 60px;
            height: 60px;
            border: 2px solid;
            float: left;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            /* background-color: antiquewhite; */
        }

        #btn {
            background-color: cadetblue;
            border: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            color: white;
        }

        .change {
            background-color: antiquewhite;
            color: blue;
            /* background-origin: padding-box; */
            border-color: black;
        }

html代码

 <ul>
        <li class="smallBox">1</li>
        <li class="smallBox">2</li>
        <li class="smallBox">3</li>
        <li class="smallBox">8</li>
        <li><button id="btn">抽奖</button></li>
        <li class="smallBox">4</li>
        <li class="smallBox">7</li>
        <li class="smallBox">6</li>
        <li class="smallBox">5</li>
    </ul>

js代码

 // 获取元素
    var aBoxs = document.getElementsByClassName('smallBox');
    var oBtn = document.getElementById('btn');
    // 创建一个数组用于存放方框的索引
    var arr = [3,0,1,2,4,7,6,5];                       //  数组修改过了
    // 创建全局变量用于获取数组中的值
    var index = 0;
    // 设置全局变量用于存放定时器
    var timer;
    // 设置定时器
    oBtn.onclick = function () {
        oBtn.disabled = true;   // 当点击一次按钮以后，按键就转为禁用
        var num = Math.random() * 50 + 1;   // 获取随机数 用于延迟定时器
        timer = setInterval(function () {    // 创建循环定时器
            index == 7 ? index = 0 : index++;
            for (var k = 0; k < arr.length; k++) {
                    aBoxs[k].className = 'smallBox';
                }
                // 单独设置
                aBoxs[arr[index]].className = 'smallBox change';
                // 判断条件
                console.log('恭喜你获得了' + aBoxs[arr[index]].innerHTML + '等奖');
            
        }, 100)
        // 设置延时定时器，用于清除循环定时器
        setTimeout(function () {
            clearInterval(timer);  // 清除定时器
            oBtn.disabled = false;  // 接触按钮的禁用
            alert('恭喜你获得了' + aBoxs[arr[index]].innerHTML + '等奖')
        }, num * 100)
    }

个人觉得这些代码可以进行优化，但是由于能力问题，暂时还不能达到，希望能有大神指点