day13-event2-CSDN博客

本文链接：https://blog.csdn.net/kuangjianming/article/details/114842029

新闻信息提示案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .details {
                display: none;
                position: absolute;
                padding: 10px;
                width: 200px;
                border: 1px solid #f60;
                background-color: #ffc;
            }

            .details::before,
            .details::after {
                content: "";
                position: absolute;
                top: -20px;
                left: 15px;
                border: 10px solid transparent;
                border-bottom-color: #f60;
            }

            .details::after {
                top: -18px;
                border-bottom-color: #ffc;
            }
        </style>
    </head>

    <body>
        <h1>新闻提示信息</h1>
        <ul class="newslist">
            <li>
                <a href="#" content="小明由于调戏女老师再次被滚粗教室">
                    教室文化
                </a>
            </li>
            <li>
                <a href="#" content="iPhone10发布,屏幕高度亮瞎了所有小伙伴">
                    iphone10发布会
                </a>
            </li>
            <li>
                <a
                    href="#"
                    content="为了弘扬乐于助人的精神，中国人大开会决定授予老王“中国好邻居”称号"
                >
                    关于老王
                </a>
            </li>
        </ul>
        <div class="details">iPhone10发布,屏幕高度亮瞎了所有小伙伴</div>

        <script>
            /* 
                【1】当鼠标移入 a标签的时候 ，把details显示出来
                【2】在移动的过程中的时候 details 跟随光标移动
                【3】当移出a标签的时候 隐藏 details 
            */
            //获取需要用到的元素
            var a = document.querySelectorAll(".newslist li a");
            var details = document.querySelector(".details");

            a.forEach(function (item) {
                item.onmouseover = function () {
                    details.style.display = "block";
                    // 把当前a标签的content的内容设置为 details的内容
                    details.innerText = item.getAttribute("content");

                    document.onmousemove = function () {
                        var e = window.event;
                        details.style.left = e.clientX - 10 + "px";
                        details.style.top = e.clientY + 30 + "px";
                    };
                };

                item.onmouseout = function () {
                    details.style.display = "none";
                };
            });
        </script>
    </body>
</html>

图片切换案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>鼠标移入时替换图片</title>
        <style>
            .picShow {
                margin: 0 auto;
                padding: 5px;
                width: 500px;
                height: 610px;
                border: 2px solid #999;
            }

            #bigPic {
                width: 500px;
                height: 500px;
            }

            #smallPic img {
                border: 1px solid #ddd;
                padding: 2px;
                width: 23%;
                height: 100px;
            }

            #smallPic img.active {
                border: 2px solid #f00;
                padding: 1px;
            }
        </style>
    </head>

    <body>
        <div class="picShow">
            <img src="img/small_1.jpg" id="bigPic" />
            <div id="smallPic">
                <img src="img/small_1.jpg" class="active" />
                <img src="img/small_2.jpg" />
                <img src="img/small_3.jpg" />
                <img src="img/small_4.jpg" />
            </div>
        </div>

        <script>
            /* 
                【1】获取元素
                【2】给4个小图片添加鼠标移入事件
                【3】给当前移入的这个图片添加active的class名，其他图片的 active移出
                【4】获取当前移入这个小图的路径设置为大图片的路径
          */

            var bigPic = document.querySelector("#bigPic");
            var imgs = document.querySelectorAll("#smallPic img");
            imgs.forEach(function (item) {
                item.onmouseover = function () {
                    for (var i = 0; i < imgs.length; i++) {
                        imgs[i].className = "";
                    }
                    item.className = "active";
                    bigPic.setAttribute("src", item.getAttribute("src"));
                };
            });
        </script>
    </body>
</html>

进度条案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>08-进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #progress {
            width: 750px;
            height: 40px;
            margin: 100px auto;
            position: relative;
        }

        #progress_bar {
            width: 700px;
            height: 100%;
            background-color: #ccc;
            position: relative;
            border-radius: 5px;
        }

        #progress_bar_flg {
            width: 25px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: -5px;
            border-radius: 5px;
            z-index: 10;
        }

        #progress_bar_value {
            width: 0px;
            height: 100%;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 5px 0 0 5px;
        }

        #progress_value {
            position: absolute;
            right: -20px;
            top: 0;
            height: 100%;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="progress">
        <!--进度条-->
        <div id="progress_bar">
            <!--拖动按钮-->
            <span id="progress_bar_flg"></span>
            <span id="progress_bar_value"></span>
        </div>
        <!--进度值-->
        <span id="progress_value">0%</span>
    </div>

    <script>
        /*
                【1】获取需要的元素
                【2】在progress_bar_flg 按下的时候 并且在document中移动的时候改变progress_bar_value 宽度和progress_bar_flg 的left值
                【3】计算 移动的百分比progress_bar_value的宽度/ progress_bar宽度 *100
            */
        var progress = document.querySelector("#progress");
        var progress_bar = document.querySelector("#progress_bar");
        var btn = document.querySelector("#progress_bar_flg");
        var value = document.querySelector("#progress_bar_value");
        var txt = document.querySelector("#progress_value");

        btn.onmousedown = function () {
            document.onmousemove = function () {
                var e = window.event;
                var left =
                    e.clientX - progress.offsetLeft - btn.offsetWidth / 2;



                if (left <= 0) {
                    left = 0;
                }
                var width = left;
                if (left >= progress_bar.offsetWidth - btn.offsetWidth) {
                    left = progress_bar.offsetWidth - btn.offsetWidth;
                    // 当按钮的left 到大最大值的时候
                    // 改变元素宽度的 width 应该也有到最大值（跟父元素的宽度一样）
                    width = progress_bar.offsetWidth;
                }


                btn.style.left = left + "px";
                value.style.width = width + "px";

                var p = (width / progress_bar.offsetWidth) * 100;
                txt.innerHTML = p.toFixed(2) + "%";
            };
        };

        document.onmouseup = function () {
            document.onmousemove = null;
        };
    </script>
</body>

</html>

键盘事件

keydown 按下键盘的时候触发的事件
keyup 抬起的时候 触发的事件
keypress 按下字符键的时候触发
这些事件 只能给一些可以输入内容的元素 和document  window 绑定

keyCode  得到的是键盘的编码
altKey 判断按下的是否是 alt
ctrlKey 判断按下的是否是 ctrl
shiftKey 判断按下的是否是 shift

// if (e.ctrlKey) {
                //     console.log("按下的是ctrl");
                // }

                // 判断是否按下的是 a
                // if (e.keyCode == 65) {
                //     console.log("按下的是a键盘");
                // }

                // 判断是否是两个指定的键键组成 ctrl +c(一般情况下 就是功能键和字符串组合 或者 功能键的组合)
                // console.log(e);
                // if (e.ctrlKey && e.keyCode == 67) {
                //     console.log(1);
                // }

                // if(e.ctrlKey && e.altKey){
                //     console.log(1);
                // }

                // 不能是字符键的组合，没有办法同时判断两个字符键
                // if(e.keyCode == 65 && e.keyCode == 66){
                //     console.log(1);
                // }

发生信息的案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 800px;
            margin: auto;
        }

        .box .content {
            width: 100%;
            height: 350px;
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: scroll;
        }

        .box .content li {
            margin: 10px 0;
            padding: 5px;
            line-height: 2;
            border-radius: 5px;
            clear: both;
        }

        .box textarea {
            height: 80px;
            display: block;
            margin: auto;
            margin-top: 20px;
            width: 100%;
        }

        .box button {
            width: 80px;
            height: 30px;
            border: 1px solid #ccc;
            float: right;
            margin-top: 10px;
        }

        .active {
            float: right;
            background-color: #fc0;
            color: #fff;
        }

        p {
            color: #ccc;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="content">
            <!-- <li class="active">hhh</li> -->
        </ul>
        <textarea name="" id="text" cols="30" rows="10"></textarea>
        <button id="btn">发送</button>
        <p>温馨提示：按 ctrl + shift键也可以发送消息哟</p>
    </div>
    <script>
        var content = document.querySelector(".content");
        var text = document.querySelector("#text");
        var btn = document.querySelector("#btn");
        

        function fn(){
            var li = document.createElement("li");
            li.innerHTML = text.value;
            li.className = "active";
            content.appendChild(li);
            text.value=''
        }
        btn.onclick = function () {
            // var li = document.createElement("li");
            // li.innerHTML = text.value;
            // li.className = "active";
            // content.appendChild(li);
            // text.value=''
           fn()
        }
       
        document.onkeydown = function () { 
            var e = window.event;
            console.log(e);
            if (e.shiftKey&&e.ctrlKey) {
                // var li = document.createElement("li");
                // li.innerHTML = text.value;
                // li.className = "active";
                // content.appendChild(li);
                // text.value=''
                fn()
            }
            // console.log(e);
        }


    </script>
</body>

</html>

事件冒泡

事件传播的机制：事件冒泡和事件捕获
事件冒泡概念：
事件捕获概念：事件从传播路径中最顶层的window开始往下捕获，直到捕获到真正触发这个事件的元素开始，就停止传播

addEventListener('事件类型',事件处理函数，设置时间的传播机制布尔值)
当第三个参数 为true的时候 这个事件的传播为事件捕获的形式
默认值为 false，事件冒泡

阻止事件传播

取消事件传播的方式：
【1】e.cancelBubble=true
【2】e.stopPropagation()

<div class="box">
            <div class="box1"></div>
</div>
<script>
  var box = document.querySelector(".box");
            var box1 = document.querySelector(".box1");
            box.addEventListener("click", function () {
                var e = window.event;
                e.cancelBubble = true;
                console.log("box");
            });
            box1.addEventListener("click", function () {
                var e = window.event;
                // e.cancelBubble = true;
                e.stopPropagation();
                console.log("box1");
            });
            window.addEventListener("click", function () {
                console.log("window");
            });
        </script>

事件委托

事件委托：子元素把一些本应该自己操作的事件委托给事件传播路径中的其中一个父元素
//利用事件对象中的 target 来判断是否需要委托的那个元素
事件委托的优点：
【1】提高性能：每一个函数都会占用内存空间，只需添加事件处理程序代理所有事件，所占用的内存空间更少
【2】动态监听：使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件

在这里插入图片描述

<div class="box">
            <button class="btn">按钮1</button>
            <button class="btn">按钮2</button>
            <button class="btn">按钮3</button>
            <button class="btn">按钮4</button>
</div>
<script>
            var btn = document.querySelectorAll("button");
            var box = document.querySelector(".box");
             // 事件委托的形式 绑定事件 把btn这个元素的事件 委托给 box
            box.onclick = function () {
                // console.log(1);
                var e = window.event;
                // 判断当前点击的是否是需要委托的元素
                if (e.target.className == "btn") {
                    // e.target 鼠标真正点击的这个元素
                    var newBtn = e.target.cloneNode(true);
                    box.appendChild(newBtn);
                }
                // console.dir(e.target)
            };
</script>

使用创建节点的形式生成任意表格

在这里插入图片描述

<!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>
            table {
                border: 1px solid #ccc;
                width: 100%;
                border-spacing: 0px;
                border-collapse: collapse;
            }
            table tr {
                height: 30px;
            }
            table tr td {
                border: 1px solid #cccc;
            }
        </style>
    </head>
    <body>
        行：
        <input type="text" id="row" />
        列：
        <input type="text" id="col" />
        <button id="btn">生成</button>

        <table>
            <tbody id="content">
                <!-- <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>

        <script>
            // 封装一个函数（获取元素的函数）
            function getEle(str) {
                return document.querySelector(str);
            }

            //先获取需要用到的元素
            var row = getEle("#row");
            var col = getEle("#col");
            var btn = getEle("#btn");
            var content = getEle("#content");

            btn.onclick = function () {
                // 先把tbody的内容清空
                content.innerHTML = "";

                //获取行和列数 进行循环渲染
                var r = row.value * 1;
                var c = col.value * 1;

                // 循环嵌套：
                // 外层循环 生成的是行
                // 内层循环 生成的是列
                for (var i = 0; i < r; i++) {
                    // 外层循环循环一次 就应该生成一个tr
                    var tr = document.createElement("tr");
                    for (var j = 0; j < c; j++) {
                        var td = document.createElement("td");
                        td.innerHTML = `单元格${i}${j}`;
                        tr.appendChild(td);
                    }
                    // 每一行都需要多加一个 td 来放button按钮
                    var btnTd = document.createElement("td");
                    btnTd.innerHTML = `<button class="copy">复制</button><button class="del">删除</button>`;
                    tr.appendChild(btnTd);

                    // 把tr 放入 tbody
                    content.appendChild(tr);
                }

                // 赋值运算是从右到左执行
                // 先把 ''给到 col.value
                // 再把col.value的值 给 row.value
                row.value = col.value = "";
            };

            // 事件委托
            content.onclick = function () {
                var e = window.event;
                if (e.target.className == "copy") {
                    // 获取当前点击的这个复制按钮的父元素 tr
                    var newTr = e.target.parentNode.parentNode.cloneNode(true);
                    content.appendChild(newTr);
                } else if (e.target.className == "del") {
                    e.target.parentNode.parentNode.remove();
                }
            };
        </script>
    </body>
</html>

阻止浏览器的默认行为

e.preventDefault()
e.returnValue=false
return false(不推荐)

右键菜单事件

window.oncontextmenu = function () {
                console.log(1);
                var e = window.event;

                // 阻止右键菜单事件的默认行为
                e.preventDefault();
            };

拖拽回放案例：拖动h2中的a时候，会记录每个坐标，然后用定时器回放坐标轨迹

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            html,
            body {
                overflow: hidden;
            }

            body,
            div,
            h2,
            p {
                margin: 0;
                padding: 0;
            }

            body {
                color: #fff;
                background: #000;
                font: 12px/2 Arial;
            }

            p {
                padding: 0 10px;
                margin-top: 10px;
            }

            span {
                color: #ff0;
                padding-left: 5px;
            }

            #box {
                position: absolute;
                width: 300px;
                height: 150px;
                background: #333;
                border: 2px solid #ccc;
            }

            #box h2 {
                height: 25px;
                line-height: 25px;
                cursor: move;
                /*手型：移动*/
                background: #222;
                border-bottom: 2px solid #ccc;
                text-align: right;
                padding: 0 10px;
            }

            #box h2 a {
                color: #fff;
                font: 12px/25px Arial;
                text-decoration: none;
                outline: none;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <h2><a href="#">点击回放拖动轨迹</a></h2>
            <p>
                <strong>Drag:</strong>
                <span>false</span>
            </p>
            <p>
                <strong>offsetLeft:</strong>
                <span>0</span>
            </p>
            <p>
                <strong>offsetTop:</strong>
                <span>0</span>
            </p>
        </div>

        <script>
            /* 
                【1】先获取需要用到的元素
                【2】给h2绑定按下事件 并且给document绑定 移动事件
                【3】在移动事件中 让box跟随光标进行移动
                    用数组的形式 把每一个移动的轨迹的坐标轴记录下来
                    [{x:xxx,y:xxx}]
                    x = 10 y = 20==>{x:10,y:20}
                【4】当鼠标抬起来的时候 移动事件应该清空
                【5】点击a标签的时候 回放 刚才移动的轨迹
                    用定时器不断的去数组中获取 对象 中的x 和y 在赋值给box的left 和top
            */
            var box = document.querySelector("#box");
            var h2 = box.querySelector("h2");
            var a = h2.querySelector("a");
            var arr = []; //记录移动的轨迹

            h2.onmousedown = function () {
                // 获取按下的时候光标在h2上的坐标轴
                var event = window.event;
                var left = event.offsetX;
                var top = event.offsetY;
                document.onmousemove = function () {
                    var e = window.event;
                    var x = e.clientX - left;
                    var y = e.clientY - top;

                    // 定义一个对象把当前的坐标轴存储下来
                    // 把这个对象push到数组中
                    var obj = { x: x, y: y };
                    arr.push(obj);

                    box.style.left = x + "px";
                    box.style.top = y + "px";
                };
            };

            document.onmouseup = function () {
                document.onmousemove = null;
            };

            var timer; // 用来存放定时器
            // 点击 a回放轨迹
            a.onclick = function () {
                var index = 0;
                // 用定时器 不断去数组中取出 数据取来设置为box的left 和top
                timer = setInterval(function () {
                    // console.log(arr[index]);

                    box.style.left = arr[index].x + "px";
                    box.style.top = arr[index].y + "px";
                    index++;
                    if (index == arr.length) {
                        // 索引的最大值 为 数组的长度-1
                        // 清除定时器
                        clearInterval(timer);
                        // 清空数组
                        // arr.length = 0
                        arr = [];
                    }
                }, 100);
            };
        </script>
    </body>
</html>

换肤案例：点击button的时候，div出现高度，再次点击隐藏

classList 获取元素class集合
【1】length ：class的个数
【2】add（）：给元素添加class，追加的形式不覆盖之前已经存在的class
【3】contains（）：判断元素是否包含指定的class名
```
返回值：布尔值
包含返回true，不包含就返回false
```
【4】remove（）：移除指定的class名
【5】toggle（）：切换指定的class名，如果元素已经存在就移除，不存在就添加

在这里插入图片描述

<style>
            * {
                padding: 0;
                margin: 0;
            }
            div {
                background: red;
                height: 0px;
                transition: all 2s;
            }
            .active {
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="box aa div"></div>
        <button id="btn">点击</button>

        <script>
            var btn = document.querySelector("#btn");
            var div = document.querySelector("div");

            console.log(div.classList);
            /* 
                classList 获取元素class集合
                    length:class的个数
                    add() 给元素添加class，追加的形式 不覆盖之间已经存在的class
                    contains() 判断元素是否包含指定的class名
                        返回值：布尔值，包含就返回true，不包含就返回false
                    remove() 移出指定的class名
                    toggle() 切换指定的class名，如果元素已经存在这个class名那么就移出，如果不存在就添加
            */
            btn.onclick = function () {
                // div.className = "active";
                // div.classList.add("active");
                // var res = div.classList.contains('box')
                // console.log(res);

                // div.classList.remove('aa');
                div.classList.toggle("active");
            };
        </script>
    </body>

下拉菜单升级版

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            body {
                background: #23384e;
                font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
            }

            .search,
            .search .inner-box,
            .search .box,
            .search .select,
            .search a {
                background: url(../images/search.jpg) no-repeat;
            }

            .search,
            .search .box,
            .search .inner-box {
                height: 34px;
            }

            .search {
                position: relative;
                width: 350px;
                margin: 10px auto;
            }

            .search .box {
                background-position: right 0;
            }

            .search .inner-box {
                background-repeat: repeat-x;
                background-position: 0 -34px;
                margin: 0 20px 0 40px;
            }

            .search .select {
                float: left;
                color: #fff;
                width: 190px;
                height: 22px;
                border: none;
                cursor: pointer;
                margin-top: 4px;
                line-height: 22px;
                padding-left: 10px;
                background-position: 0 -68px;
            }

            .search a {
                float: left;
                width: 80px;
                height: 24px;
                color: #333;
                letter-spacing: 4px;
                line-height: 22px;
                text-align: center;
                text-decoration: none;
                background-position: 0 -90px;
                margin: 4px 0 0 10px;
            }

            .search a:hover {
                color: #f60;
                background-position: -80px -90px;
            }

            .search ul {
                position: absolute;
                top: 26px;
                left: 40px;
                color: #fff;
                width: 198px;
                background: #2b2b2b;
                border: 1px solid #fff;
                display: none;
            }

            .search ul li {
                height: 25px;
                line-height: 24px;
                cursor: pointer;
                padding-left: 10px;
                margin-bottom: -1px;
                border-bottom: 1px dotted #fff;
            }

            .search ul li:hover,
            .search ul li.active {
                background: #8b8b8b;
            }
        </style>
    </head>

    <body>
        <div class="search">
            <div class="box">
                <div class="inner-box">
                    <input
                        type="text"
                        id="keyword"
                        class="select"
                        autocomplete="off"
                        placeholder="请选择游戏名称"
                    />
                    <a href="#">搜索</a>
                </div>
            </div>
            <ul class="list">
                <li class="active">地下城与勇士</li>
                <li>魔兽世界（国服）</li>
                <li>魔兽世界（台服）</li>
                <li>热血江湖</li>
                <li>大话西游II</li>
                <li>QQ幻想世界</li>
            </ul>
        </div>

        <script>
            /*
                实现的功能：
                    【1】搜索框获取焦点的时候 显示下拉菜单
                        【1】获取元素
                    【2】搜索框失去焦点时候 隐藏下拉菜单

                    一下两个功能只有在获取焦点的时候才会有用
                    【3】按下鼠标的上下键 可以动态选中 li元素（给li元素添加 active 这个class名）
                    【4】当按下 enter键的时候，把拥有 active class名的元素的内容 赋值给搜索框
            */
            var keyword = document.querySelector("#keyword");
            var list = document.querySelector(".list");
            var lis = list.querySelectorAll("li");
            var index = 0;

            // input框获取焦点事件
            // 需要把获取焦点的事件换成点击事件，因为 获取焦点事件中灭有办法阻止点击事件的传播
            keyword.onclick = function () {
                var event = window.event;

                // 阻止事件的传播
                event.cancelBubble = true;

                list.style.display = "block";
                // 绑定一个 键盘按下事件
                document.onkeydown = function () {
                    var e = window.event;
                    // 向上的箭头keyCode = 38
                    // 向下的箭头keyCode = 40
                    // enter 的keyCode = 13
                    // 在给当前索引的元素添加之前 应该移出所有元素 的active
                    lis.forEach(function (item) {
                        item.classList.remove("active");
                    });
                    if (e.keyCode == 38) {
                        index--;
                    } else if (e.keyCode == 40) {
                        index++;
                    }

                    if (index < 0) {
                        index = lis.length - 1;
                    } else if (index == lis.length) {
                        index = 0;
                    }

                    lis[index].classList.add("active");

                    // 判断如果按下的是enter的时候
                    if (e.keyCode == 13) {
                        // 把有activeclass名的li元素的内容写入 vkeyword的value
                        var txt = document.querySelector(".active");
                        keyword.value = txt.innerHTML;
                        list.style.display = "none";
                    }
                };
            };

            // input框失去焦点时候
            // keyword.onblur = function () {
            //     list.style.display = "none";
            // };

            // 给li绑定点击事件
            lis.forEach(function (item) {
                item.onclick = function () {
                    keyword.value = item.innerHTML;
                    list.style.display = "none";
                };
            });

            // 不能使用keyWord 失去焦点来隐藏list
            // 点击document的时候 隐藏list
            document.onclick = function () {
                list.style.display = "none";
            };
        </script>
    </body>
</html>