当前位置：网站首页>Web APIs DOM-事件基础丨黑马程序员

Web APIs DOM-事件基础丨黑马程序员

2022-06-28 02:50:00 【黑马程序员官方】

前期更新笔记内容：Web API 基本认知 /  获取DOM元素 / 设置/修改DOM元素内容和元素属性 /定时器-间歇函数

一、事件

  • 什么是事件？

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

  •  什么是事件监听？

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

 

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

总结
 
1. 什么是事件？
  •  事件是在编程时系统内发生的动作或者发生的事情
  •  比如点击按钮 click
2. 什么是事件监听？
  •  就是让程序检测是否有事件产生，一旦有事件触发，就立即调
  • 用一个函数做出响应，也称为 注册事件
3. 事件监听三要素是什么？
  •  事件源 (谁被触发了)
  •  事件 (用什么方式触发，点击还是鼠标经过等)
  •  事件处理程序 （要做什么事情）

 案例1：

 

  • 淘宝点击关闭二维码案例代码： 
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .erweima {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        .erweima i {
            position: absolute;
            left: -13px;
            top: 0;
            width: 10px;
            height: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 10px;
            color: #ccc;
            font-style: normal;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="erweima">
        <img src="./images/code.png" alt="">
        <i class="close_btn">x</i>
    </div>
    <script>
        // 1. 获取元素   事件源 i   关闭的 erweima 
        let close_btn = document.querySelector('.close_btn')
        let erweima = document.querySelector('.erweima')
        // 2. 事件监听
        close_btn.addEventListener('click', function () {
            // erweima 关闭  他是隐藏的
            erweima.style.display = 'none'
        })
    </script>
</body>

</html>

案例2：

  •  随机点名案例代码：
<!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>
        div {
            width: 200px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>开始抽奖吧</div>
    <button>点击点名</button>
    <script>
        // 1. 获取元素  div 和 button 
        let box = document.querySelector('div')
        let btn = document.querySelector('button')
        // 2. 随机函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['刘备', '曹操', 'pink老师']
        // 3. 事件监听
        btn.addEventListener('click', function () {
            // 随机的数字
            let random = getRandom(0, arr.length - 1)
            // console.log(arr[random])
            box.innerHTML = arr[random]
            // 删除数组里面的元素  splice(从哪里删, 删几个)
            arr.splice(random, 1)
            // 如果数组没有了 长度为0，就要禁用按钮
            if (arr.length === 0) {
                // console.log('最后一个了')
                btn.disabled = true
                btn.innerHTML = '已经抽完'
            }
        })
    </script>
</body>

</html>

案例3 ：随机点名案例 

 

需求：点击开始随机抽取，点击结束输出结果
业务分析：
① 点击开始按钮随机抽取数组的一个数据，放到页面中
② 点击结束按钮删除数组当前抽取的一个数据
③ 当抽取到最后一个数据的时候，两个按钮同时禁用
核心：利用定时器快速展示，停止定时器结束展示

 

  • 随机点名案例代码
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 1. 获取元素  两个按钮 + div
        // 一定不要忘记加点  因为里面写css类选择器
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        // timer 要是全局变量
        let timer = 0
        // random 要是全局变量
        let random = 0
        // 2. 给开始按钮注册事件
        start.addEventListener('click', function () {
            // 随机抽数据--- 快速不断的抽取 间歇函数定时器
            timer = setInterval(function () {
                random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 25)
            // 如果到了最后一个，就禁用两个按钮
            if (arr.length === 1) {
                // console.log('没了')
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })
        // 3. 给结束按钮注册事件  本质是停止定时器
        end.addEventListener('click', function () {
            // 停止定时器
            clearInterval(timer)
            // 删除数组元素
            arr.splice(random, 1)
            // console.log(arr)
        })
    </script>
</body>

</html>

二、 事件监听版本

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、小米搜索框案例
 

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

案例
分析：
①：开始下拉菜单要进行隐藏
②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
③：表单失去焦点，反向操作
 
  • 搜索框案例代码：
<!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;
            box-sizing: border-box;
        }

        ul {

            list-style: 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;
            transition: all .3s;
        }

        .mi .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <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>
        // 1. 获取元素   input 
        let search = document.querySelector('input')
        let list = document.querySelector('.result-list')
        // 2. 事件监听 获得光标事件  focus
        search.addEventListener('focus', function () {
            // 显示下拉菜单
            list.style.display = 'block'
            // 文本框变色
            this.classList.add('search')
        })
        // 3. 事件监听 失去光标事件  blur
        search.addEventListener('blur', function () {
            // 隐藏下拉菜单
            list.style.display = 'none'
            // 文本框去色
            this.classList.remove('search')
        })
    </script>
</body>

</html>
2. 微博输入案例

需求：用户输入文字，可以计算用户输入的字数
分析：
①：判断用输入事件 input
②：不断取得文本框里面的字符长度
③：把获得数字给下面文本框
  • CSS代码
* {
  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;
}
.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;
}
  • js代码：
// 日期格式化
function getTime() {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  month = month < 10 ? '0' + month : month;
  var day = date.getDate();
  day = day < 10 ? '0' + day : day;

  var hours = date.getHours();
  hours = hours < 10 ? '0' + hours : hours;

  var minutes = date.getMinutes();
  minutes = minutes < 10 ? '0' + minutes : minutes;

  var seconds = date.getSeconds();
  seconds = seconds < 10 ? '0' + seconds : seconds;


  var str = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  return str;
};


// 1. 获取元素
// 1.1 文本域
var area = document.querySelector('#area');
// 1.2 发布按钮
var send = document.querySelector('#send');
// 1.3 类名为useCount的span
var useCount = document.querySelector('.useCount');
// 1.4 ul
var ul = document.querySelector('ul');


// 2. 【功能1：文本域输入的过程中统计内容的个数给span】
// 2.1 给文本域注册oninput事件
area.oninput = function () {
  // 2.2 获取文本域中的内容的长度，赋值给类名为useCount的span的innerText
  useCount.innerText = this.value.length;
};



// 3. 【功能2：点击发布按钮创建li追加的ul中】
// 3.1 给按钮注册事件onclik
send.onclick = function () {
  // 3.2,在事件处理程序中 获取文本域中的内容
  var v = area.value;
  // 3.3 检测内容的长度是否等于0，若等于0，提示不能为空
  if (v.length == 0) {
    alert('内容不能为空！');
  } else {
    // 3.4 否则，创建li插入到ul中最前面
    var newLi = document.createElement('li');
    ul.insertBefore(newLi, ul.children[0]);
    // 3.5 创建一个类名为info的div，追加到li中
    var info = document.createElement('div');
    info.className = 'info';
    newLi.appendChild(info);
    // 3.5.1 创建一个img元素，追加到类名为info的div中
    var img = document.createElement('img');
    info.appendChild(img);
    // 3.5.2 设置img的src
    img.src = 'images/03.jpg';
    // 3.5.3 创建一个span元素，追加到类名为info的div中
    var span = document.createElement('span');
    info.appendChild(span);
    // 3.5.4 设置span的内容
    span.innerText = '百里守约';
    // 3.5.5 创建一个p元素，追加到类名为info的div中
    var p = document.createElement('p');
    info.appendChild(p);
    // 3.5.6 把当前时间设置给p元素
    p.innerText = '发布于：' + getTime();
    // 3.6 创建一个类名为content的div,追加到li中
    var content = document.createElement('div');
    content.className = 'content';
    newLi.appendChild(content);
    // 3.7 设置类名为content的div的innerText为文本域的内容
    content.innerText = v;
    // 3.8 发布成功后，清空文本域，数量重置为0
    area.value = '';
    useCount.innerText = '0';
  }

};

  • HTML代码：

<!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>
  <link rel="stylesheet" href="css/weibo.css">
</head>

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

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

      </ul>
    </div>
  </div>
  <script>
    // 1. 获取元素 文本域  count
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')
    // 2. 绑定事件  用户输入事件 input
    area.addEventListener('input', function () {
      // console.log('测试中')
      // 不断得到文本域里面的字符长度
      // area.value 可以得到的值
      // console.log(area.value)
      // area.value.length 得到输入字符的长度
      // console.log(area.value.length)
      useCount.innerHTML = area.value.length
    })
  </script>
</body>

</html>

3.全选文本框案例1

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
 
分析：
①：全选复选框点击，可以得到当前按钮的 checked
②：把下面所有的小复选框状态checked，改为和全选复选框一致
③：如果当前处于选中状态，则把文字改为取消， 否则反之

4.全选文本框案例2

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
分析：
①：遍历下面的所有的checkbox,添加点击事件
②：在事件内部,遍历所有的checkbox状态,只要有一个为false 就将全选状态设置为false , 把文字改
为全选，并且直接return (退出循环)
③：在循环结束将全选的状态直接设置为true
 

  • 3和4案例 全选反选案例代码：
<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></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. 获取元素  全选 和   ck 小复选框
    let all = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let span = document.querySelector('span')
    // 2. 事件监听   全选按钮  
    all.addEventListener('click', function () {
      // console.log(all.checked)  // true  false 
      // 我们需要做的就是把 all.checked 给下面三个小按钮
      // 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      // 当我们的全选按钮处于选中状态，则可以改为取消
      if (all.checked) {
        // console.log('要改')
        span.innerHTML = '取消'
      } else {
        span.innerHTML = '全选'
      }
    })


    // 3. 小按钮的做法 同时给多个元素绑定相同事件
    for (let i = 0; i < cks.length; i++) {
      // 绑定事件
      cks[i].addEventListener('click', function () {
        // console.log(11)
        // 只要点击任何一个小按钮，都要遍历所有的小按钮  
        for (let j = 0; j < cks.length; j++) {
          // 都来看看是不是有人没有选中
          if (cks[j].checked === false) {
            // 如果有false 则退出循环 结束函数
            all.checked = false
            span.innerHTML = '全选'
            return
          }
        }
        // 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
        all.checked = true
        span.innerHTML = '取消'
      })
    }

  </script>
</body>

</html>

 

5.购物车加减操作

需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号

分析：
①：给添加按钮注册点击事件, 获取表单的value,然后自增
②：解除减号的disabled状态
③：给减号按钮添加点击事件,获取表单的value,然后自减
④：自减结束需要判断,如果结果小于等于1 则添加上disabled状态
 
  • 购物车加减操作代码：
<!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>
    div {
      width: 80px;
    }

    input[type=text] {
      width: 50px;
      height: 44px;
      outline: none;
      border: 1px solid #ccc;
      text-align: center;
      border-right: 0;
    }

    input[type=button] {
      height: 24px;
      width: 22px;
      cursor: pointer;
    }

    input {
      float: left;
      border: 1px solid #ccc;

    }
  </style>
</head>

<body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
    <script>
      // 1. 获取元素  三个
      let total = document.querySelector('#total')
      let add = document.querySelector('#add')
      let reduce = document.querySelector('#reduce')
      // 2. 点击加号 事件侦听  
      add.addEventListener('click', function () {
        // console.log(typeof total.value)
        // total.value = total.value + 1
        // i++   隐式转换
        // i = i + 1 
        total.value++
        reduce.disabled = false
      })
      // 3. 点击减号 事件侦听  
      reduce.addEventListener('click', function () {

        total.value--
        if (total.value <= 1) {
          reduce.disabled = true
        }
      })

      // 2 === '2'
    </script>
  </div>
</body>

</html>

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈  另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。

原网站

版权声明
本文为[黑马程序员官方]所创，转载请带上原文链接，感谢
https://blog.csdn.net/itcast_cn/article/details/125490246

边栏推荐

猜你喜欢

随机推荐