【备战春招】第4天 前端工程师2022版

课程名称：事件监听

课程章节：JS函数与DOM

课程讲师： 未知

课程内容：

1. 什么是事件监听？

                ·DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应

    1-2. 什么是“事件”：用户与网页的交互动作

                当用户点击元素时

                当鼠标移动到元素上时

                当文本框的内容被改变时

                ……

     1-3. “监听”，顾名思义，就是让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序

            设置事件监听的方法主要有onxxx和addEventListener()两种，二者的区别将在“事件传播”一课中介绍

      1-4.  最简单的设置事件监听的方法

            最简单的给元素设置事件监听的方法就是设置它们的onxxx属性，像这样：

                oBox.onclick = function () {

                    点击盒子时，将执行这里的语句

                }

2. 常见的鼠标事件监听

         *  onclick           //当鼠标单击某个对象

            ondblclick        //当鼠标双击某个对象

            onmousedown       //当某个鼠标按键在某个对象上被按下

            onmouseup         //当某个鼠标按键在某个对象上被松开

            onmousemove       //当某个鼠标按键在某个对象上被移动

            onmouseenter      //当鼠标进入某个对象（相似事件onmouseover)

            onmouseleave      //当鼠标离开某个对象（相似事件onmouseout)

.box2 {
            width: 200px;
            height: 200px;
            background-color: #333;
        }

<div id="box2" class="box2"></div>

        var oBox2 = document.getElementById('box2');
        oBox2.onclick = function () {
            console.log('我是onclick')
        };
        oBox2.ondblclick = function () {
            console.log('我是ondblclick')
        };
        oBox2.onmousedown = function () {
            console.log('onmousedown')
        };
        oBox2.onmouseup = function () {
            console.log('onmouseup')
        };
        oBox2.onmouseenter = function () {
            console.log('onmouseenter')
        };
        oBox2.onmouseleave = function () {
            console.log('onmouseleave')
        };
        oBox2.onmousemove = function () {
            console.log('onmousemove')
        };

 3. 常见的键盘事件监听

            onkeypress     // 当某个键盘的键被按下（系统按钮如箭头键和功能键无法得到识别）

            onkeydown       //当某个键盘的键被按下（系统按钮可以识别，并且会先于onkeypress发生）

            onkeyup         //当某个键盘的键被松开

姓名：
    <input type="text" id="nameField">

        var nameField = document.getElementById('nameField');
        nameField.onkeydown = function(){
            console.log('我是onkeydown')
        };
        nameField.onkeyup = function(){
            console.log('我是onkeyup')
        };
        nameField.onkeypress = function(){
            console.log('我是onkeypress')
        };

*4.常见的表单事件监听

            onchange     //当用户改变域的内容  （改变后，失去焦点后触发）

            oninput      //正在修改域的内容 （修改中触发）

            onfocus      //当某元素获得焦点（比如tab键或鼠标点击)

            onblur       //当某元素失去焦点

            onsubmit     //当表单被提交

            onreset      //当表单被重置

<form id="myform">
        <p>
            姓名：
            <input type="text" name="nameField">
        </p>
        <p>
            年龄：
            <input type="text" name="ageField">
        </p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>

 var myform = document.getElementById('myform');
        var nameField = myform.nameField;
        var ageField = myform.ageField;
        nameField.onchange = function(){
            console.log('你已经修改完了姓名');
        };
        nameField.oninput = function(){
            console.log('你正在修改姓名');
        };
        nameField.onfocus = function(){
            console.log('姓名框已经得到了焦点');
        };
        nameField.onblur = function(){
            console.log('姓名框已经失去了焦点');
        };
        myform.onsubmit = function(){
            alert('你正在尝试提交表单');
        };
        myform.onreset = function(){
            alert('你正在尝试重置表单');
        };

5.常见的页面事件监听    

            onload       //加载页面完成时  

            onunload     //退出页面时

课程收获：

再次复习事件监听觉得还是挺简单的，但是js的事件监听在学了Vue之后，会觉得还是挺麻烦的，而且初学者容易弄混，当然也可能是我学得不扎实，继续努力吧，加油！