DOM—事件基础

IsIand
149 阅读3分钟

DOM—事件基础

事件

1.事件监听

1）什么是事件？

  • 事件是编程时系统内发生的动作或者发生的事情
  • 比如点击按钮click

2）什么是事件监听？

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

3）语法

  • 元素.addEventListener('事件',要执行的函数）

4）事件监听三要素是什么？

  • 事件源：那个dom元素被事件触发了，要获取dom元素
  • 事件：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
  • 事件调用的函数：要做什么事

image_r9F3mb5_op.png

⭐注意： 1.事件类型要加引号 2.函数是点击之后再去执行，每次点击都会执行一次

2.拓展阅读-事件监听版本

1）DOM L0

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

image_cMltnVTIMf.png

2）DOM L2

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

3）发展史

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

3.事件类型

1）鼠标事件 — 鼠标触发

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

2）焦点事件 — 表单获得光标

  • focus 获得焦点
  • blur 失去焦点

3）键盘事件 — 键盘触发

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

4）文本事件 — 表单输入触发

  • input 用户输入事件

高阶函数

1.函数表达式

1）本质：函数表达式和普通函数并无本质上的区别

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

⭐函数表达式： 1.函数也是数据 2.把函数赋值给变量

image_UJzhFzifUo.png

2）回调函数

  • 将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
  • 回调函数本质还是函数，只不过把它当成参数使用
  • 使用匿名函数做为回调函数比较常见

3）使用场景

image_dLWLrNA396.png image_2vxrCMl3x8.png

环境对象

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

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

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

编程思想

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

1)使用:

  • 干掉所有人

    使用for循环

  • 复活他自己

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

案例

1.事件初体验

<script>
    let btn1 = document.querySelector('.btn1')
    //注册事件
    // btn1.addEventListener("事件类型","处理函数" )
​
    //click 鼠标单击
    btn1.addEventListener("click", function() {
        console.log('开始点名了');
    })
​
    let btn2 = document.querySelector('.btn2');
    btn2.addEventListener('click', function() {
        console.log('结束点名了');
    })
​
    let box1 = document.querySelector('.box1');
    //mouseover  鼠标移入到div的区域
    box1.addEventListener('mouseover', function() {
        console.log('鼠标进入div区域');
    })
    box1.addEventListener('mouseout', function() {
        console.log('鼠标离开div区域');
    })
</script>

2.掉头发案例

<body>
    <button class="btn">现在有1000根头发</button>
    <script>
        let i = 1000;
        let btn = document.querySelector('.btn');
        //注册 绑定点击事件
        btn.addEventListener('click', function() {
            i--;
            btn.innerHTML = `现在还剩${i}根头发`
        })
    </script>
</body>

3.点击隐藏

<body>
    <button>隐藏</button>
    <div>广告</div>
​
​
    <script>
        let btn = document.querySelector('button');
        let div = document.querySelector('div');
        div.style.width = '200px';
        div.style.height = '200px';
        div.style.backgroundColor = 'cadetblue';
        btn.addEventListener('click', function() {
            div.style.display = 'none';
        })
    </script>
</body>
​

4.随机点名

<body>
    <h1>将军</h1>
    <button class="btn1">开始随机点名</button>
    <button class="btn2">停止点名</button>
    <script>
        let h1 = document.querySelector('h1');
        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        let names = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'];
        let timeId, i;
        btn1.addEventListener('click', function() {
​
            timeId = setInterval(function() {
                i = Math.round(Math.random() * (names.length - 1))
                let name = names[i]
                h1.innerText = `${name}将军`
            }, 100)
        })
​
        btn2.addEventListener('click', function() {
            clearInterval(timeId)
        })
    </script>
</body>

5.商品全选

<script>
  let checkAll = document.querySelector('#checkAll');
          let checkboxList = document.querySelectorAll('.ck')
          checkAll.addEventListener('click', function() {
              for (let index = 0; index < checkboxList.length; index++) {
                  checkboxList[index].checked = checkAll.checked
  
  
              }
  
          })
</script>
​

6.商品全选—进阶

<!DOCTYPE html>
​
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>10-商品全选</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
​
      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }
​
      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }
​
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
​
      .allCheck {
        width: 80px;
      }
    </style>
  </head>
​
  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
​
    <script>
      /* 
      1 获取 全选标签 绑定点击事件
        checkAll
​
      2 点击事件触发后 获取 复选框的选中属性  checkAll.checked
​
      3 把全选按钮的选中状态 设置到每一个 其他复选框中 
​
      4 数组和循环思想  解决重复工作的
        
       */
​
      let checkAll = document.querySelector('#checkAll');
​
      // 获取符合选择器要求的数组
      let checkboxList = document.querySelectorAll('.ck');
      // console.log(checkboxList);
​
      //  监听点击 绑定点击 注册点击 订阅点击
      checkAll.addEventListener('click', function () {
        // console.log('全选');
        // console.log(checkAll.checked); // 获取当前全选按钮的选中状态
        // 设置复选框 选中状态等于 全选框的选中状态
​
        for (let index = 0; index < checkboxList.length; index++) {
          // checkboxList[index] // 每一个复选框
          checkboxList[index].checked = checkAll.checked;
        }
      });
    </script>
  </body>
</html>
​

7.批量给标签绑定事件

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 点击每一个li标签 都可以输出 你好
​
        // 获取li标签数组
        let liList = document.querySelectorAll("li");
​
        // 循环
        for (let index = 0; index < liList.length; index++) {
​
            // 给每一个li标签绑定点击事件
            liList[index].addEventListener("click", function() {
                console.log("你好");
            })
​
        }
    </script>
</body>

8.商品单选-全选功能

<script>
    /* 
        1 获取全选按钮和 一组 商品复选按钮
        2 给全选按钮绑定点击事件
        3 给一组商品 绑定点击事件 
         */
​
    let checkAll = document.querySelector('#checkAll');
​
    let checkboxList = document.querySelectorAll('.ck');
​
    // 商品全选点击 功能
    checkAll.addEventListener('click', function() {
        for (let index = 0; index < checkboxList.length; index++) {
            checkboxList[index].checked = checkAll.checked;
        }
    });
​
    // 一组商品的 点击功能
    // 给每一个商品绑定点击事件
    for (let index = 0; index < checkboxList.length; index++) {
        checkboxList[index].addEventListener('click', function() {
            // 判断是否达到了全选 条件
            let checked = isAllChecked();
            // 设置全选按钮即可
            checkAll.checked = checked;
        });
    }
​
    // 函数来判断
    function isAllChecked() {
        // 1 存放选中的商品的数量
        let checkedNum = 0;
        // 2 商品数组做循环
        for (let index = 0; index < checkboxList.length; index++) {
            // 3  判断每一商品的选中状态
            if (checkboxList[index].checked) {
                checkedNum++;
            }
        }
        // 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
        if (checkedNum === checkboxList.length) {
            // console.log('全选');
            return true;
        } else {
            // console.log('不全选');
            return false;
        }
    }
</script>

9.不同方式绑定点击事件

<body>
    <!-- 以下两种方式都不推荐 了解即可-->
    <button onclick="console.log(123)">点击</button>
    <button onclick="show()">点击</button>

    <button>点击</button>
    <script>
        // 1 获取dom元素
        let btn = document.querySelector('button');

        // 使用旧方式 L0 第一个版本的方式绑定点击事件  on+事件类型 = 匿名函数
        // on也可以是在 行内 绝对不推荐
        // btn.onclick = function() {
        //     console.log('事件触发啦');
        // };
        // btn.onclick = show;

        function show() {
            console.log('show');
        }

        // addEventListener 对一个事件类型 绑定多个处理函数 
        // on+事件 对一个事件类型 只能绑定一个处理函数

        // btn.addEventListener("click",function () {
        //   console.log("show");
        // });
        // btn.addEventListener("click",function () {
        //   console.log("show");
        // });
    </script>
</body>

10.不同的事件类型

<body>
    <div></div>
​
    <!-- 只有表单 元素 有获得焦点 失去焦点事件 -->
    <input type="text" />
    <script>
        // 获取div元素
        let div = document.querySelector('div');
        let input = document.querySelector('input');
​
        // 绑定不同的事件
        div.addEventListener("click", function() {
            console.log("click 鼠标点击事件");
        })
​
        // 鼠标经过元素
        // div.addEventListener("mouseenter",function () {
        // console.log("mouseenter 鼠标经过");
        // })
​
        // 鼠标离开元素
        // div.addEventListener("mouseleave",function () {
        // console.log("mouseleave 鼠标离开");
        // })
​
        // 鼠标经过
        // div.addEventListener("mouseover",function () {
        //   console.log("mouseover 鼠标经过");
        // })
​
        // 鼠标离开
        // div.addEventListener("mouseout",function () {
        //   console.log("mouseout 离开");
        // })
​
        // 获得焦点
        // input.addEventListener("focus",function () {
        //   console.log("输入框 获得焦点 ");
        //   document.body.style.backgroundColor='#000'
        // })
​
        // // 失去焦点 
        // input.addEventListener("blur",function () {
        //   console.log("输入框 失去焦点");
        //   document.body.style.backgroundColor='#fff'
        // })
​
        // 键盘按下事件 div不行 表单可以 
        // 给body标签添加比较多
        // document.body.addEventListener("keydown",function () {
        // console.log("keydown 按下");
        // })
​
        // 键盘抬起
        // document.body.addEventListener("keyup",function () {
        //   console.log("keyup 抬起");
        // })
​
        // 输入事件 输入框
        // input.addEventListener("input",function () {
        //   console.log("只要你在我的输入框输入了内容，我就触发");
        // })
​
        // 介绍了基本常见的事件 后面做到案例的时候 老师先带领大家复习一遍再去使用事件
    </script>
</body>

11.小米搜索框

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    ul {
        list-style: none;
        display: none;
    }
    
    .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
    }
    
    .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
    }
    
    .mi .search {
        border: 1px solid #ff6700;
    }
    
    ul {
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
    }
    
    ul a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
    }
    
    ul a:hover {
        background-color: #eee;
    }
</style>
</head>
​
<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本" />
        <ul>
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
​
    <script>
        let input = document.querySelector('input')
        let ul = document.querySelector('ul')
        input.addEventListener('focus', function() {
            ul.style.display = 'block'
        })
        input.addEventListener('blur', function() {
            ul.style.display = 'none'
        })
    </script>
</body>

12.统计文字字数

<style>
    .box {
        width: 800px;
        margin: 100px auto;
    }
    
    .box img {
        float: left;
        margin-bottom: 10px;
    }
    
    #area {
        float: left;
        width: 800px;
        height: 200px;
        border-radius: 20px;
        font-size: 18px;
        padding: 10px 20px;
    }
    
    .box div {
        margin-top: 10px;
        float: right;
    }
    
    .num {
        color: red;
    }
    
    .box div button {
        width: 100px;
        height: 30px;
        background-color: rgb(0, 162, 255);
        border: none;
        color: #fff;
        cursor: pointer;
    }
    
    .text {
        float: left;
        width: 800px;
        height: 300px;
        border: 1px solid black;
        /* background-color: #ccc; */
        margin: 50px 300px;
    }
</style>
​
<body>
    <div class="box">
        <img src="./images/tip.png" alt="">
        <textarea id="area" placeholder="把你的故事分享给大家吧" cols="30" rows="10" maxlength="500"></textarea>
        <div>
            <span class="num">0</span>
            <span>/</span>
            <span>500</span>
            <button>发布</button>
        </div>
    </div>
    <div class="text"></div>
    <script>
        let textarea = document.querySelector('textarea');
        let num = document.querySelector('.num');
        let button = document.querySelector('button');
        let text = document.querySelector('.text');
​
        textarea.addEventListener('input', function() {
            num.innerText = textarea.value.length
        })
​
        button.addEventListener('click', function() {
            text.innerHTML = textarea.value
            alert('已发布')
        })
    </script>
</body>

13.购物车加减操作

<style>
    div {
        width: 150px;
        height: 100px;
        border: 1px solid black;
    }
    
    #num {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        float: left;
        text-align: center;
        outline: none;
    }
    
    input[type="button"] {
        width: 50px;
        height: 50px;
        float: right;
    }
</style>
​
<body>
    <div>
        <input type="text" id="num" value="4">
        <input type="button" id="add" value="+">
        <input type="button" id="sub" value="-">
    </div>
    <script>
        let num = document.querySelector('#num');
        let add = document.querySelector('#add');
        let sub = document.querySelector('#sub');
​
        add.addEventListener('click', function() {
            let i = num.value;
            i++;
            num.value = i
            sub.disabled = false
        })
        sub.addEventListener('click', function() {
            let i = num.value;
            i--;
            num.value = i
            if (i == 1) {
                sub.disabled = true
            }
​
        })
    </script>
</body>
​

14.tab栏案例

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
    }
    
    .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 50px;
    }
    
    .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
    }
    
    .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
    }
    
    .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
    }
    
    .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
    }
    
    .products .main {
        float: left;
        display: none;
    }
    
    .products .main.active {
        display: block;
    }
    
    .tab li.active {
        border-color: red;
        border-bottom: 0;
    }
</style>
</style>
​
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>|</span></li>
            <li class="tab-item">国妆名牌<span>|</span></li>
            <li class="tab-item">清洁用品<span>|</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main active">
                <img src="./images/guojidapai.jpg" alt="">
            </div>
            <div class="main">
                <img src="./images/guozhuangmingpin.jpg" alt="">
            </div>
            <div class="main">
                <img src="./images/qingjieyongpin.jpg" alt="">
            </div>
            <div class="main">
                <img src="./images/nanshijingpin.jpg" alt="">
            </div>
        </div>
    </div>
​
    <script>
        let lis = document.querySelectorAll('li');
        let mains = document.querySelectorAll('.main');
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('active')
                }
                this.classList.add('active')
​
                for (let m = 0; m < mains.length; m++) {
                    mains[m].classList.remove('active')
                }
                mains[i].classList.add('active')
            })
​
​
        }
    </script>
</body>

15.排他思想

<style>
    ul li {
        display: block;
        list-style: none;
        float: left;
        width: 100px;
        height: 40px;
        border: 1px solid black;
        text-align: center;
        line-height: 40px;
    }
    
    .active {
        background-color: brown;
    }
</style>
​
<body>
    <ul>
        <li class="active">动画片</li>
        <li>恐怖片</li>
        <li>科幻片</li>
        <li>悬疑片</li>
        <li>记录片</li>
    </ul>
    <script>
        let lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove('active')
                }
                this.classList.add('active')
            })
        }
    </script>
</body>
avatar
文章
阅读
粉丝