01-事件案例分析

最新推荐文章于 2021-07-22 08:11:40 发布

牛先森家的牛奶

最新推荐文章于 2021-07-22 08:11:40 发布

阅读量329

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106766489

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件案例分析

事件类型
移动端触摸事件
- 移动端触摸事件分析
- 移动端案例事件分析（拖拽元素）
任意表格案例
反选和全选和不选
点击按钮实现选项卡不同
随机给body生成背景色
简易验证码-验证信息
封装十六进制随机颜色
简易日历
模拟快递单号的查询

事件类型

       /*
        事件的分类：（on 是绑定事件的一种方式）
        1.浏览器的事件
            【1】onload    浏览器加载事件，浏览器加载完成之后执行的事件
            【2】onscroll  滚动条事件,当页面中的滚动条滚动的时候会触发这个事件
            【3】onresize  事件会在窗口或框架被调整大小时发生。
        2.鼠标事件
            【1】onclick 单击事件，鼠标按下和抬起的结合
            【2】ondbclick 双击事件，连续点两次单击事件就是一个双击事件
            【3】oncontextmenu 菜单事件（右键事件）
            【4】onmousedown 鼠标按下事件
            【5】onmouseup 鼠标抬起事件
            【6】onmouseover onmouseenter 鼠标移入事件
            【7】onmouseout onmouseleave 鼠标移出事件
            【8】onmousemove 鼠标移动事件
            
          注意：enter和over是划过元素时触发事件，在元素里面划动不触发事件函数  
               而move是划过元素触发事件，在元素里面划动也会触发事件函数

        3.键盘事件(一般只给可以输入内容的元素绑定 或者 window绑定)
            【1】onkeydown
            【2】onkeyup
            【3】onkeypress （按下字符键的时候触发）

        4.表单事件
            【1】oninput 输入事件
            【2】onchange 内容事件 当内容改变时候并且失去焦点时候触发的事件
            【3】onfocus 获取焦点的事件
            【4】onblur  失去焦点的事件
        */
        
          // 1. contextmenu 我们可以禁用右键菜单
          document.addEventListener('contextmenu', function (e) {
             e.preventDefault();
          })
          // 2. 禁止选中文字 selectstart
          document.addEventListener('selectstart', function (e) {
             e.preventDefault();
          })

移动端触摸事件

    // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
    // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
    // （3） 离开手指 touchend:

移动端触摸事件分析

<!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: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>

    // 1. 获取元素
    // 2. 手指触摸DOM元素事件
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function () {
      console.log('我摸了你');
    });

    // 3. 手指在DOM元素身上移动事件
    div.addEventListener('touchmove', function () {
      console.log('我继续摸');
    });

    // 4. 手指离开DOM元素事件
    div.addEventListener('touchend', function () {
      console.log('轻轻的我走了');
    });
  </script>
</body>

</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>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    
    // 触摸事件对象
    // 1. 获取元素
    // 2. 手指触摸DOM元素事件
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function (e) {
      // console.log(e);
      // touches 正在触摸屏幕的所有手指的列表 
      // targetTouches 正在触摸当前DOM元素的手指列表
      // 如果侦听的是一个DOM元素，他们两个是一样的
      // changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
      // 因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
      console.log(e.targetTouches[0]);
      // targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等

    });

    // 3. 手指在DOM元素身上移动事件
    div.addEventListener('touchmove', function () {

    });

    // 4. 手指离开DOM元素事件
    div.addEventListener('touchend', function (e) {
      // console.log(e);
      // 当我们手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表
      // 但是会有 changedTouches
      
    });
  </script>
</body>

</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>
  <style>
    div {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
    // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
    // （3） 离开手指 touchend:
    var div = document.querySelector('div');
    var startX = 0; //获取手指初始坐标
    var startY = 0;
    var x = 0; //获得盒子原来的位置
    var y = 0;
    div.addEventListener('touchstart', function (e) {
      //  获取手指初始坐标
      startX = e.targetTouches[0].pageX;
      startY = e.targetTouches[0].pageY;
      x = this.offsetLeft;
      y = this.offsetTop;
    });

    div.addEventListener('touchmove', function (e) {
      //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
      var moveX = e.targetTouches[0].pageX - startX;
      var moveY = e.targetTouches[0].pageY - startY;
      // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
      this.style.left = x + moveX + 'px';
      this.style.top = y + moveY + 'px';
      e.preventDefault(); // 阻止屏幕滚动的默认行为
    });
  </script>
</body>

</html>

任意表格案例

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 100%;
      border: 1px solid red;
      border-spacing: 0px;
      border-collapse: collapse;
    }

    table tr td {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  行：<input type="text" id="num1">
  列: <input type="text" id="num2">
  <button id="btn">生成</button>
  <input type="checkbox" checked>

  <table id="table">
    <!-- 
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr> 
    -->
  </table>
  <script>
    // 获取num1 和 num2 里面的值，点击生成表格
    // 绑定点击事件

    // 不能在点击事件的外面获取input的值，在外面获取是页面一加载就获取，页面加载的时候没有值，获取的到值为空
    // var n1 = num1.value;
    // var n2 = num2.value;

    btn.onclick = function () {
      // 获取 num1 和num2 的值
      var n1 = num1.value;
      var n2 = num2.value;

      // 用来存放 循环生成的 HTML结构
      var res = '';
      // 有行和列必须使用循环嵌套

      // 外层循环实现行
      for (var i = 0; i < n1; i++) {
        res += '<tr>'
        // 内层循环实现列
        for (var j = 0; j < n2; j++) {
          res += '<td>' + j + '</td>'
        }
        res += '</tr>'
      }
      table.innerHTML = res;
    }
  </script>
</body>

反选和全选和不选

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">全选</button>
  <button id="btn2">不选</button>
  <button id="btn3">反选</button>
  <div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>

  <script>
    /*
      【1】点击全选按钮 把所有的复选框选上
      【2】点击不选按钮 把所有的复选框 把勾去掉
      【3】点击反选按钮 把选上的勾去掉，不选的给选上
    */
    // 获取button按钮的元素集合，循环绑定点击事件
    var btn = document.getElementsByTagName('button');

    // 需要改变 复选框的状态，所以需要获取这些复选框
    var inputs = document.getElementsByTagName('input');

    for (var i = 0; i < btn.length; i++) {
      btn[i].onclick = function () {
        // 通过this 拿到点击的这个元素
        // 怎么通过这个元素去判断我实现哪个功能
        // 获取元素的内容进行判断，然后去写相应的功能 this.innerHTML
        if (this.innerHTML === '全选') {
          // 循环给每一个input添加 checked = true
          for (var j = 0; j < inputs.length; j++) {
            inputs[j].checked = true;
          }
        } else if (this.innerHTML === '反选') {
          // 已经选上 把勾去掉 checked状态为true 需要改变为 false
          // 未勾上的 需要勾上 checked状态false 需要改为 true
          for (var j = 0; j < inputs.length; j++) {
            // 循环把状态改变为 和以前相反的状态
            // 执行顺序从右到左，赋值运算优先级最低，先获取input元素checked的状态并且取反，然后再把这个值赋值给input的checked属性
            inputs[j].checked = !inputs[j].checked;
          }

        } else if (this.innerHTML === '不选') {
          // 循环的把每一个input的 checked状态改为 false
          for (var j = 0; j < inputs.length; j++) {
            inputs[j].checked = false;
          }
        }
      }
    }
  </script>

点击按钮实现选项卡不同

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin: 100px;
      width: 460px;
    }

    .box .btn {
      height: 40px;
      margin-bottom: 5px;
    }

    .box .btn input {
      float: left;
      width: 100px;
      text-align: center;
      height: 40px;
      margin-right: 20px;
      border: 1px solid #334455;
    }

    .box .btn input:nth-child(4) {
      margin-right: 0px;
    }

    .box .con {
      width: 460px;
      height: 400px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      display: none;
    }

    .box .btn .active {
      background: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="btn">
      <input type="button" class="btnList active" value="体育">
      <input type="button" class="btnList" value="娱乐">
      <input type="button" class="btnList" value="新闻">
      <input type="button" class="btnList" value="教育">
    </div>
    <div class="con" style="display: block;">体育</div>
    <div class="con">娱乐</div>
    <div class="con">新闻</div>
    <div class="con">教育</div>
  </div>

  <script>
    // 获取按钮的元素
    var btn = document.getElementsByTagName('input');

    // 获取下面选项卡的元素集合
    // var con = document.getElementsByTagName('div'); 这个是获取页面中所有的div元素，指向获取class名为con的这个元素

    // 通过class名来获取元素
    var con = document.getElementsByClassName('con');

    // 循环给按钮添加点击事件
    for (var i = 0; i < btn.length; i++) {
      // 给每一个按钮添加一个idx的属性，并且赋值为 按钮的索引
      btn[i].idx = i;
      // 给每一个元素添加点击事件
      btn[i].onclick = function () {
        // 排他思想 
        // 把所有的按钮的active名去掉
        for (var j = 0; j < btn.length; j++) {
          // 用''来替换元素的所有class名 btnList也被替换掉了
          // btn[j].className = '';
          // 如果还想保留btnList，值去掉active
          btn[j].className = 'btnList';

          // 把下面所有的con 隐藏
          con[j].style.display = 'none';
        }
        // 给当前点击的元素添加active，使用this来表示当前添加的这个元素
        this.className = 'btnList active';

        // 更改 con的状态
        // con[i].style.display = 'block';
        // 根据按钮的索引，拿到对应的con集合里面元素来显示
        con[this.idx].style.display = 'block';
      }
    }

  </script>

</body>

随机给body生成背景色

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: pink;
    }
  </style>
</head>

<body>
  <button id="btn">点击换色</button>
  <script src="js/utils.js"></script>
  <script>

    // 给按钮添加点击事件
    btn.onclick = function () {
      // 随机改变颜色
      // document.body 获取 body元素
      // 随改变rgb括号里面的数值 rgb(red,green,blue) 里面的取值为0-255
      document.body.style.background = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
    }
  </script>

</body>

简易验证码-验证信息

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      width: 80px;
      height: 30px;
      background: #ccc;
      text-align: center;
      line-height: 30px;
      /* 当点击元素的时候会默认选中元素的内容，可以设置以下diamante，内容就不会被选择 */
      user-select: none;
    }
  </style>
</head>

<body>
  <input type="text" id="num">
  <span id="code"></span>
  <button id="btn">验证</button>
  <script src="js/utils.js"></script>
  <script>
    // 获取input元素的内容 和验证码的内容
    // 点击验证的时候，把这两个值拿去对比，一样的就返回验证成功，不一样的时候就返回验证失败
    // 验证码是动态随机的 
    // 生成4位数的随机数，并且当成 span元素的内容
    code.innerHTML = randomNum(1000, 9999);

    btn.onclick = function () {
      if (num.value === code.innerHTML) {
        alert('验证成功')
      } else {
        alert('验证失败');
        // 验证失败时候 重新刷新验证码
        code.innerHTML = randomNum(1000, 9999);

        // 把input框的内容情况
        num.value = '';
      }
    }
    // 点击验证码元素 刷新验证码
    code.onclick = function () {
      // this指向就是code
      this.innerHTML = randomNum(1000, 9999);
    }


  </script>
</body>

封装十六进制随机颜色

 <script>

    // 任意两个数之间的随机数  调用函数的时候需要传两个数值的参数
    function randomNum(n, m) {

      // 判断两个参数的大小
      var max, min;
      max = n > m ? n : m;
      min = n < m ? n : m;
      return parseInt(Math.random() * (max - min + 1) + min);
    }

    var str = '0123456789abcedf';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      // console.log(str[randomNum(0, 15)]);
      color += str[randomNum(0, 15)]
    }
    document.body.style.background = color;
    //console.log(color);

  </script>

简易日历

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    body {
      background: #f6f9fc;
      font-family: arial;
    }

    .calendar {
      width: 210px;
      margin: 0 auto;
      padding: 10px 10px 20px 20px;
      background: #eae9e9;
    }

    .calendar ul {
      width: 210px;
      overflow: hidden;
      padding-bottom: 10px;
    }

    .calendar li {
      float: left;
      width: 58px;
      height: 54px;
      margin: 10px 10px 0 0;
      border: 1px solid #fff;
      background: #424242;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }

    .calendar li h2 {
      font-size: 20px;
      padding-top: 5px;
    }

    .calendar li p {
      font-size: 14px;
    }

    .calendar .active {
      border: 1px solid #424242;
      background: #fff;
      color: #e84a7e;
    }

    .calendar .active p {
      font-weight: bold;
    }

    .calendar .text {
      width: 178px;
      padding: 0 10px 10px;
      border: 1px solid #fff;
      padding-top: 10px;
      background: #f1f1f1;
      color: #555;
    }

    .calendar .text h2 {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .calendar .text p {
      font-size: 12px;
      line-height: 18px;
    }
  </style>
</head>

<body>
  <div id="tab" class="calendar">

    <ul id="ul">
      <li class="active">
        <h2>1</h2>
        <p>JAN</p>
      </li>
      <li>
        <h2>2</h2>
        <p>FER</p>
      </li>
      <li>
        <h2>3</h2>
        <p>MAR</p>
      </li>
      <li>
        <h2>4</h2>
        <p>APR</p>
      </li>
      <li>
        <h2>5</h2>
        <p>MAY</p>
      </li>
      <li>
        <h2>6</h2>
        <p>JUN</p>
      </li>
      <li>
        <h2>7</h2>
        <p>JUL</p>
      </li>
      <li>
        <h2>8</h2>
        <p>AUG</p>
      </li>
      <li>
        <h2>9</h2>
        <p>SEP</p>
      </li>
      <li>
        <h2>10</h2>
        <p>OCT</p>
      </li>
      <li>
        <h2>11</h2>
        <p>NOV</p>
      </li>
      <li>
        <h2>12</h2>
        <p>DEC</p>
      </li>
    </ul>

    <div class="text" id="txt">
      <h2 id="month">1月活动</h2>
      <p id="title">快过年了，大家可以商量着去哪玩吧～</p>
    </div>
  </div>
  <script>
    // 【1】点击月份按钮的时候切换 class名 active
    //  1】获取元素
    var lis = document.getElementsByTagName('li');
    var arr = [
      '1月份活动的数据是好好过年',
      '2月份活动的数据是好好过年',
      '3月份活动的数据是好好过年',
      '4月份活动的数据是好好过年',
      '5月份活动的数据是好好过年',
      '6月份活动的数据是好好过年',
      '7月份活动的数据是好好过年',
      '8月份活动的数据是好好过年',
      '9月份活动的数据是好好过年',
      '10月份活动的数据是好好过年',
      '11月份活动的数据是好好过年',
      '12月份活动的数据是好好过年'
    ]
    //  2】绑定点击事件
    for (var i = 0; i < lis.length; i++) {
      // 给每一个按钮添加一个index属性，属性值为他的索引
      lis[i].index = i;
      lis[i].onclick = function () {
        // 排他思想
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = '';
        }
        this.className = 'active';
        // this.index 获取当前点击的index 的属性值
        month.innerHTML = this.index + 1 + '月份活动'

        // 用index 的属性值来去数组中对应的数据
        title.innerHTML = arr[this.index];
      }
    }
  </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>
    * {
      margin: 0;
      padding: 0;
    }

    .search {
      position: relative;
      width: 178px;
      margin: 100px;
    }

    .con {
      display: none;
      position: absolute;
      top: -40px;
      width: 171px;
      border: 1px solid rgba(0, 0, 0, .2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
      padding: 5px 0;
      font-size: 18px;
      line-height: 20px;
      color: #333;
    }

    .con::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 28px;
      left: 18px;
      border: 8px solid #000;
      border-style: solid dashed dashed;
      border-color: #fff transparent transparent;
    }
  </style>
</head>

<body>
  <div class="search">
    <div class="con">123</div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
  </div>
  <script>
    // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
    // 表单检测用户输入： 给表单添加键盘事件
    // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
    // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    jd_input.addEventListener('keyup', function () {
      // console.log('输入内容啦');
      if (this.value == '') {
        con.style.display = 'none';
      } else {
        con.style.display = 'block';
        con.innerText = this.value;
      }
    })
    // 当我们失去焦点，就隐藏这个con盒子
    jd_input.addEventListener('blur', function () {
      con.style.display = 'none';
    })
    // 当我们获得焦点，就显示这个con盒子
    jd_input.addEventListener('focus', function () {
      if (this.value !== '') {
        con.style.display = 'block';
      }
    })
  </script>
</body>

牛先森家的牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-事件案例分析

事件案例分析任意表格案例反选和全选和不选点击按钮实现选项卡不同随机给body生成背景色任意表格案例<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 100
复制链接

扫一扫