事件的介绍加各种属性加编程思维-排他思想和this

亦随
145 阅读1分钟

事件

1649041901406.png

事件三要素

​ 1.触发事件dom元素 ​ 2.事件类型

  1. 事件触发了 做业务 函数

    总结

1649066126162.png

1.事件初体验

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <button>点我抽奖</button>
    <script>
        /* 事件三要素
             1.触发事件dom元素
             2.事件类型
             3.事件触发了 做业务 函数
              */
        // 注册事件
        // btn1.addEventListener("事件类型","处理函数")
        //2.事件类型
        let bu = document.querySelector('button')
        let bu1 = document.querySelector('div')

        //3.事件触发了 做业务 函数

        //click：鼠标点击触发事件
        bu.addEventListener("click", function () {
            alert('恭喜你中奖了')
        })
        //mouseover：鼠标移入  触发事件
        bu1.addEventListener("mouseover", function () {
            alert('帅哥你来了')
        })
    </script>
</body>

</html>

案例-按钮控制随机点名开始或者结束

<!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>
  </head>
  <body>
    <h1></h1>
    <button class="btn1">开始随机点名</button>
    <button class="btn2">结束点名</button>

    <script>
      /* 
      1 按钮1  
        1 注册点击事件  开启定时器
        2 定时器内部
          1 随机获取一个下标（提前把 名字数组定义好）
          2 数组[下标]  要显示的名称
          3 要显示名称 设置到 dom元素中 

      2 按钮2
        1 清除按钮1 中  定时器 

      3 开启定时器要做的工作 

      4 小结
        1 老师的实现过程 不是按照现在代码的结构 上到下 一口气写完 

        2 给两个按钮注册了两个点击事件 分别测试他们的功能

        3 再在两个按钮中 实现  一个开启 定时器 一个关闭定时器

        4 再在开启的定时器中 来编写业务逻辑 

        5 以上代码很存在优化的地方 
       */

      let btn1 = document.querySelector('.btn1');
      let btn2 = document.querySelector('.btn2');
      let h1 = document.querySelector('h1');

      // 声明一个全局变量
      let timeId;
      // console.log(timeId);

      // 注册开启定时器 点击事件
      btn1.addEventListener('click', function () {
        // 开启定时器 返回定时器id 用来清除定时器

        // 声明变量的时候 如果 不使用let 关键字 它变成了全局变量
        // 不推荐！！ 代码不规范
        timeId = setInterval(function () {
          //  定时器的业务
          let arr = ['张飞', '赵云', '刘备', '吕布', '刘婵'];

          // 根据数组的长度来获取随机数
          let index = Math.round(Math.random() * (arr.length - 1));
          // console.log(arr[index]);
          h1.innerText = arr[index];
        }, 100);
      });
      // 注册清除定时器 点击事件
      btn2.addEventListener('click', function () {
        clearInterval(timeId);
      });
        补充优化的两个方法：  //解决可以点击开始按钮一直加快的第一种方法，就是将每个按钮添加  DOM名字.disabled = true禁止   DOM名字.disabled = false 不禁止
          //解决可以点击开始按钮一直加快的第二种方法，就是把清除计时器的代码复制一份到开始上面，让它先接受点击的值
    </script>
  </body>
</html>

2.不同的方式绑定点击事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>15-不同的方式绑定点击事件.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <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 = function () {
        console.log('事件触发啦');
      };
      btn.onclick = function () {
        console.log('事件触发啦');
      };
      btn.onclick = function () {
        console.log('事件触发啦');
      };

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

      // btn.onclick = show;
      // function show() {
      //   console.log('show');
      // }

      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
      // btn.addEventListener("click",function () {
      //   console.log("show");
      // });
    </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,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-不同的事件类型.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <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>
</html>

4.批量给标签绑定事件

就是把绑定事件放遍历循环里面，让他遍历完所有一样的标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-批量给标签绑定事件.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</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>
</html>

编程思想

自己理解就是点击的时候把所有的同类都变化一次，然后再跳出循环给自己单独变化一次

1649214190413.png

排他思想应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-怕他思想的应用.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        list-style: none;
        width: 600px;
        height: 100px;
        display: flex;

        margin: 100px auto;
        border: 1px solid #ccc;
      }
      li {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <script>
      // 先获取到每一个li标签
      // 再li标签绑定点击事件

      // 写处理其他所有的元素 让让他们的背景颜色都变成白色
      // 事件触发 设置 被点击的li标签 选中的样式

      // let liList = document.querySelectorAll('li');
      // for (let index = 0; index < liList.length; index++) {
      //   liList[index].addEventListener('click', function () {
      //     // 给被点击的li标签加上选中样式
      //     // liList[index].style.backgroundColor = 'red';
      //     // 先设置每一个li标签的背景颜色 成 白色
      //     for (let j = 0; j < liList.length; j++) {
      //       liList[j].style.backgroundColor = '#fff';
      //     }
      //     // 再单独设置 被点击的li标签  变成红色
      //     this.style.backgroundColor = 'red';
      //   });
      // }

      let liList = document.querySelectorAll('li'); // 获取所有的li标签 数组

      for (let index = 0; index < liList.length; index++) {
        // 对所有的li标签  开始绑定点击事件
        liList[index].addEventListener('click', function () {
          // 设置所有的li标签 背景颜色为白色
          setAllLiColor();
          // 设置被点击的li标签 为红色
          this.style.backgroundColor = 'red';
        });
      }

      // 设置所有li标签的背景颜色为白色
      function setAllLiColor() {
        for (let j = 0; j < liList.length; j++) {
          liList[j].style.backgroundColor = '#fff';
        }
      }
    </script>
  </body>
</html>

this= 表示 我自己,(自己的意思就是包住它的是谁那它自己就是谁)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-点击自己输出自己.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>大家好我是1弟</li>
      <li>大家好我是2弟</li>
      <li>大家好我是3弟</li>
      <li>大家好我是4弟</li>
      <li>大家好我是5弟</li>
    </ul>
    <script>
      // 需求： 点击每一个 li标签 都可能 打印出 被点击的li标签的文本内容即可

      // let liList=document.querySelectorAll("li");

      // for (let index = 0; index < liList.length; index++) {
      //   liList[index].addEventListener("click",function () {
      //     // console.log(liList[index].innerText);
      //     console.log(this.innerText); // this = 表示 我自己   this整体的知识
      //   })

      // }

      // let obj={
      //   userName:"悟空",
      //   sayHi:function(){
      //     // console.log(this.userName);
      //     console.log(this);// obj
      //   }
      // }

      // obj.sayHi(); // this =  ??? this=obj  this.userName="悟空"

      // 在前端的js中， 我们的全局变量  可以理解为 是window的一个属性
      // window 是默认就存的一个全局变量
      // console.log(window);
      // window比较特殊，我们想要使用window的一些功能的时候 是可以省略 window

      // 什么是window， 就是js中的一个 大大的全局变量 内置就有的  不需要我们创建
      // 很多的代码其实都是window的方法、属性
      // console
      // document
      // setInterval....

      // 为了我们方便编写代码，允许我们在使用window的一些属性或者方法的时候  省略了window关键字而已（这个省略其他对象做不到的）

      // console.log("打印");
      // window.console.log("打印")

      // document.write("你好")
      // window.document.write("你好")

      // window.setInterval(function () {
      //   console.log("你好");
      // },1000);

      // // 全局函数 全局变量  =   show也是 window的一个属性
      // function show() {
      //   // console.log("你好");
      //   console.log(this); // 会输出什么？
      // }

      // // window.show();
      // show();

      // let obj={
      //   sayHi:function(){
      //     console.log(this); // 输出obj
      //   }
      // }

      // // obj.sayHi();// 输出obj
      // window.show();//

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

      // show(); // 输出window ？？

      // window是大大的全局变量
      // 我们自己定义的全局变量 默认就是window的一个属性 ！！
      // window.show  ..
      // function show(params) {

      // }

      // 因为 let 关键字是 es6的才有的  虽然 userName也是全局变量  都是它的机制不像以前的哪一套
      //  全局变量都是window的 一个属性 暂时 不用管   let。。。变量 后期会去补充！！ js发展有更新迭代
      // let userName = 123;
      // console.log(window.userName);
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝