API（DOM - 事件）

一、事件

        1. 事件

                事件：

                        在编程时系统内发生的动作或者发生的事情。

                事件监听：

                        让程序检测是否有事件产生，一旦有事件触发，就立即调用函数做出响应，也成为注册事件。

                语法：

                

                事件监听的三要素：

                        事件源：哪个dom元素被事件出发了，要获取dom元素

                        事件：要用什么方式出发，比如鼠标单击click、鼠标经过 mouseover 等

                        事件调用的函数：要做什么事

                注意：  1. 事件类型要加引号

                             2. 函数是点击之后再去执行，每次点击都会执行一次

        2. 事件监听版本

                DOM L0

                        事件源.on事件 = function（） {}

               DOM L0

                        事件源.addEventListener(事件， 事件处理函数)

        3. 事件类型

                鼠标事件：（鼠标触发）

                        click   鼠标点击、 mouseenter  鼠标经过、  mouseleave   鼠标离开

                焦点事件：（表单获得光标）

                        focus  获得焦点、   blur   失去焦点

                键盘事件：（键盘触发）

                        Keydown   键盘按下触发、 Keyup   键盘抬起触发

                文本时间：（表单输入触发）

                        input  用户输入事件

二、高阶函数

       1.  高阶函数：

                简单理解为函数的高级应用，Js中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。【值】就是js中的数据，如数值、字符串、布尔、对象等。

                函数表达式：与普通函数并没有本质上的区别：

                        普通函数的声明和调用无顺序限制，推荐先声明再调用。

                        函数表达式必须要先声明在调用

                        

 

                回调函数：

                        当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数。

                        例：

                                 

三、环境对象

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

        作用：弄清楚this的指向，可以让我们代码更简洁。

                函数的调用方式不同，this 指代的对象也不同

              【谁调用， this 就是谁】 是判断 this 指向的粗略规则

                直接调用函数，其实相当于是 window.函数，所以 this 指代 window

四、编程思想

        排他思想

                当前元素为A状态,其他元素为B状态。

                使用：

                        1. 干掉所有人

                                         使用for循环

                        2. 复活他自己

                                        通过this或者下标找到自己或者对应的元素

例：

    .pink {
            background-color: pink;
        }

    <button class="pink">第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>

 let btns = document.querySelectorAll('button')
        for(let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                /*  this.classList.add('pink')  //不能先用这个代码复活自己，要先把其他的清空才能复活自己  */

               /*  // 干掉所有人   ----这样是吧所有的都清空一遍实际我们只需要清空一个有pink颜色的就可以，所以我们可以用另外一种方法
                for(let j = 0 ; j < btns.length; j ++) {
                    btns[j].classList.remove('pink')
                } */

                // 只需要找出唯一的pink类移除 --- 然后加一个自己
                document.querySelector('.pink').classList.remove('pink')
                // 复活自己
                this.classList.add('pink')
            })
        }