事件类型

完成事件监听需要三个步骤：

获取DOM元素。
通过addEventListener方法为DOM节点添加事件监听。
等待时间触发，如用户点击了某个按钮时便会触发click事件类型。
事件触发后，相应的回调函数会被执行。解释：时间就是找一个机会(事件触发)调用调用一个函数(回调函数)。

事件类型

click是点击的意思，还有双击dblclick。

<body>
    <p class="text">文本</p>
    <button id="btn">点击</button>
    <script>
        //1.获取button对应的DOM对象
        const btn = document.querySelector('#btn')
        //2.添加事件监听，等待事件发生，便执行一个函数。双击dblclick
        btn.addEventListener('dblclick',function(){
            console.log('等待事件被触发');


        const text = document.querySelector('.text')
        //改变p标签的颜色
        text.style.color = 'red'
        //改变p标签的文本内容
        text.style.fontSize = '20px'
     })
    </script>
</body>

将众多事件类型可分类为：鼠标事件，键盘事件，表单事件，焦点事件，逐一学习。

鼠标事件是指跟鼠标相关的操作，如单击，双击，移动等。

mouseenter监听鼠标是否移入DOM元素。

<body>
    <h3>鼠标事件</h3>

    <hr>
    <div class="box">
        <p>监听与鼠标相关的操作</p>
    </div>
    <script>
        //需要监听的DOM元素
        const box = document.querySelector('.box');
        const p = document.querySelector('p');
        //监听鼠标移入当前的DOM对象
        box.addEventListener("mouseenter",function(){
            //修改文本的内容
            this.innerText = '鼠标移入了....';

            //修改光标的风格
            this.style.cursor = 'move';
            p.style.color = 'red'
        })
    </script>
</body>

mouseleave监听鼠标是否移进DOM元素。

<body>
    <h3>鼠标事件</h3>
    <hr>
    <div class="box">
        <p>监听与鼠标相关的操作</p>
    </div>
    <script>
        //需要监听的DOM元素
        const box = document.querySelector('.box');
        const p = document.querySelector('p');
        //监听鼠标移入当前的DOM对象
        box.addEventListener("mouseleave",function(){
            //修改文本的内容
            this.innerText = '鼠标移出了....';

            p.style.color = 'red'
        })
    </script>
</body>

焦点事件

fucus获得焦点blur失去焦点

文本框输入事件

input

事件对象

任何事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。事件回调函数的【第一个参数】即所谓的事件对象，通常习惯性的将这个命名为event，ev。事件对象包含了哪些有用信息：

ev.type当前事件的类型。
ev.clientX/Y光标时浏览器窗口的位置。
ev.offsetX/Y光标相当于当前DOM元素的位置。注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

环境对象

能够分析判断函数运行在不同环境中的this所指代的对象。

环境对象指的是函数内部特殊的变量this，它代表的当前函数运行时所处的环境。

<body>
    <script>
        //1.声明函数
        function sayHi(){
            //this是一个变量
            console.log(this);
        }
        //2.声明一个对象
        let user = {
            name: '张三',
            sayHi: sayHi   //此处把sayHi函数，复制给sayHi属性 
        }
        let person = {
            name: '张三',
            sayHi: sayHi   //此处把sayHi函数，复制给sayHi属性 
        }

        //直接调用
        sayHi()//window
        window.sayHi()

        //作为对象方法调用
        user.sayHi()  //user
        person.sayHi()

    </script>
</body>

this本质上是一个变量，数据类型为对象。
函数的调用方式不同，this变量的值也不同。
【谁调用this就是谁】判断this的值的粗略估计。
函数直接调用时实际上windows.sayHi()所以this的值为windows。

回调函数

如果将函数A作为参数传递给函数 B时，我们就称函数A为回调函数。

<body>
    <script>
        function fo(a){
            console.log(a);
        }
        //普通的值做参数
        fo(10)
        fo('hello world')
        fo(['html','css','javascript'])

        function bar(){
            console.log('函数也能当参数');
        }

        fo(bar)

        // 声明 foo 函数
//   function foo(arg) {
//     console.log(arg);
//   }

//   // 普通的值做为参数
//   foo(10);
//   foo('hello world!');
//   foo(['html', 'css', 'javascript']);

//   function bar() {
//     console.log('函数也能当参数...');
//   }
//   // 函数也可以做为参数！！！！
//   foo(bar);
    </script>
</body>

函数bar作为参数传递给了fo，bar就是所谓的回调函数。

回顾间歇函数setInterval

<script>
        function fn(){
            console.log('我是回调函数');
        }
        //调用定时器
        setInterval(fn,1000);

//与下面的是一样的
        setInterval(function(){
            console.log('我是回调函数');
        },1000)
    </script>

结论：

回调函数的本质还是函数，只不过把他当参数使用。

使用匿名函数作为回调函数比较常见。

事件监听细化|青训营

事件类型

事件类型

鼠标事件是指跟鼠标相关的操作，如单击，双击，移动等。

焦点事件

文本框输入事件

事件对象

环境对象

回调函数