Dom-事件基础

事件：

事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮

事件监听：

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

语法：

    <script>
        元素.addEvenListener('事情',要执行的函数)
    </script>

事件监听三要素：
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数：要做什么事
```
    <script>
        //   1. 获取元素
        let btn = document.querySelector('button')
        //   2.时间监听（注册事件）
        btn.addEventListener("click", function () {
            alert('被点击了')
        })
    </script>
```
注意：

1.事件类型要加引号

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

拓展阅读-事件监听版本：

DOM L0 :

事件源.on事件 = function() { }
DOM L2 :

事件源.addEventListener(事件，事件处理函数)
发展史：
- DOM L0 ：是 DOM 的发展的第一个版本； L：level
- DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
- DOM L2：使用addEventListener注册事件
- DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型：

鼠标事件：鼠标触发
1. click 鼠标点击
2. mouseenter 鼠标经过
3. mouseleave 鼠标离开
焦点事件：表单获得光标
1. focus 获得焦点
2. blur 失去焦点
键盘事件：键盘触发
1. Keydown 键盘按下触发
2. Keyup 键盘抬起触发

文本事件：表单输入触发

input 用户输入事件

微博发布案例

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

        ul {
            list-style: none;
        }

        .w {
            width: 900px;
            margin: 0 auto;
        }

        .controls textarea {
            width: 878px;
            height: 100px;
            resize: none;
            border-radius: 10px;
            outline: none;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 18px;
        }

        .controls {
            overflow: hidden;
        }

        .controls div {
            float: right;
        }

        .controls div span {
            color: #666;
        }

        .controls div .useCount {
            color: red;
        }

        .controls div button {
            width: 100px;
            outline: none;
            border: none;
            background: rgb(0, 132, 255);
            height: 30px;
            cursor: pointer;
            color: #fff;
            font: bold 14px '宋体';
            transition: all 0.5s;
        }

        .controls div button:hover {
            background: rgb(0, 225, 255);
        }

        .controls div button:disabled {
            background: rgba(0, 225, 255, 0.5);
        }

        .contentList {
            margin-top: 50px;
        }

        .contentList li {
            padding: 20px 0;
            border-bottom: 1px dashed #ccc;
            position: relative;
        }

        .contentList li .info {
            position: relative;
        }

        .contentList li .info span {
            position: absolute;
            top: 15px;
            left: 100px;
            font: bold 16px '宋体';
        }

        .contentList li .info p {
            position: absolute;
            top: 40px;
            left: 100px;
            color: #aaa;
            font-size: 12px;
        }

        .contentList img {
            width: 80px;
            border-radius: 50%;
        }

        .contentList li .content {
            padding-left: 100px;
            color: #666;
            word-break: break-all;
        }

        .contentList li .the_del {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="w">
        <!-- 操作的界面 -->
        <div class="controls">
            <img src="./images/9.6/tip.png" alt="" /><br />
            <!-- maxlength 可以用来限制表单输入的内容长度 -->
            <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount" id="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>

        </div>
        <div class="contentList">
            <ul id="list">

            </ul>
        </div>
    </div>

    <script>
        let ul = document.querySelector('#list')
 
        let send = document.querySelector('#send')
      
        send.addEventListener("click", function () {
            let value = area.value
            // 设置一个新创建的li标签
            let li = document.createElement('li')
            // 设置li标签的文本内容等于文本域的内容
            li.innerText = value
            // 把新创建的li标签插入到ul标签内
            ul.appendChild(li)
            // 清空文本域内容 设置文本域的文本等于空的字符串
            area.value = ''
            // 设置字体个数等于0
            useCount.innerText = 0
        })
        area.addEventListener("input", function () {
            // 获取输入的文本的长度把他设置到数量标签中
            useCount.innerText = area.value.length
        })
    </script>
</body>

</html>

高阶函数：

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。

函数表达式：

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

    <script>
        //函数表达式与普通函数并无普通函数本质上是一样的
        let counter = function (x, y) {
            return x + y
        }
        // 调用函数
        let result = counter(5, 10)
        console.log(result)  // 15
    </script>

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用

回调函数：

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

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

    <script>
        function fn() {
            console.log("我是回调函数")
        }
        //fn传递给了setInterval，fn就是回调函数
        setInterval(fn,1000)
    </script>

把函数当做另外一个函数的参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

环境对象：this

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

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

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

    <script>
        let lis = document.querySelectorAll('li')
        for (let index = 0; index < lis.length; index++) {
            lis[index].addEventListener("click", function () {
                //使用for循环来给lis元素遍历点击事件
                for (let j = 0; j < lis.length; j++) {
                    //给每一个lis元素先都去掉bgc这个类
                    lis[j].classList.remove('bgc')  //干掉所有人
                } 
                // this指点击其中一个lis元素本身
                this.classList.add('bgc') //复活我自己
            })
        }
    </script>

编程思想：

排他思想：当前元素为A状态,其他元素为B状态

使用：

干掉所有人使用for循环
复活他自己通过this或者下标找到自己或者对应的元素

学习Web APIs 崩溃的第二天！！