js学习第十天

最新推荐文章于 2024-08-04 16:33:59 发布

qq_45753238

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量20

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_45753238/article/details/134395831

版权

表单事件

获取焦点

失去焦点

<body>
    <input type="text" />
    <script>
      // onfocus onblur
      const ipt = document.querySelector('input')
      // 获取焦点
      ipt.addEventListener('focus', function () {
        console.log('获得焦点了！！！')
      })
      // 失去焦点
      ipt.addEventListener('blur', function () {
        console.log('失去焦点了！！！')
      })

      // js方法 focus() blur()
      ipt.focus()
    </script>
  </body>

键盘事件

<body>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')
      // input事件 输入内容就触发
      tarea.addEventListener('input', function () {
        console.log('正在输入')
        console.log(tarea.value)
      })
      tarea.addEventListener('keyup', function () {
        console.log('keyup')
        console.log(tarea.value)
      }),
        tarea.addEventListener('keydown', function () {
          console.log('keydown')
          console.log(tarea.value)
        })

      // 顺序 keydown -> input -> keyup
      // 获取用户输入的完整内容 keyup 或input
    </script>
  </body

事件对象

事件对象：当事件发生后，浏览器会把当前事件相关的信息会封装成一个对象

获取：事件处理程序的第一个形参

常用事件对象属性 e.target -> 事件源 e.key -> 按键字符串

<body>
    <div class="box">1223</div>
    <textarea rows="10" cols="30" placeholder="请输入评论"> </textarea>
    <script>
      const tarea = document.querySelector('textarea')
      const box = document.querySelector('.box')

      /*
        事件对象：当事件发生后，浏览器会把当前事件相关的信息会封装成一个对象
        获取： 事件处理程序的第一个形参
        常用事件对象属性 e.target -> 事件源  e.key -> 按键字符串 
      */
      box.addEventListener('click', function (e) {
        console.log(e.target) // box
      })
      // input事件 输入内容就触发
      tarea.addEventListener('input', function () {
        console.log('正在输入')
        console.log(tarea.value)
      })
      tarea.addEventListener('keyup', function () {
        console.log('keyup')
        console.log(tarea.value)
      }),
        tarea.addEventListener('keydown', function (e) {
          console.log('keydown')
          console.log(e.key)
          if (e.key === 'Enter') {
            console.log('你按的是enter')
          }
        })

      // 顺序 keydown -> input -> keyup
      // 获取用户输入的完整内容 keyup 或input
    </script>
  </body>

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1.所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式（留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

<!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>
      .box {
        display: flex;
      }

      .box div {
        width: 100px;
        height: 40px;
        background-color: skyblue;
        margin: 20px;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>div1</div>
      <div>div2</div>
      <div>div3</div>
      <div>div4</div>
    </div>

    <script>
      // 需求 点击某个div div背景色变成红色
      // 1 获取所有div
      const divs = document.querySelectorAll('.box > div')
      // 2 循环绑定事件
      for (let i = 0; i < divs.length; i++) {
        divs[i].addEventListener('click', function () {
          //把其余的div背景色去掉 对当前点击的div设置
          // 先干掉所有人-> 让所有的div背景色清空
          for (let j = 0; j < divs.length; j++) {
            divs[j].style.backgroundColor = ''
          }
          // 再对自己设置
          // divs[i].style.backgroundColor = '#f00'
          this.style.backgroundColor = '#f00'
        })
      }
    </script>
  </body>
</html>

qq_45753238

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习第十天

常用事件对象属性 e.target -> 事件源 e.key -> 按键字符串。事件对象：当事件发生后，浏览器会把当前事件相关的信息会封装成一个对象。3. 注意顺序不能颠倒，首先干掉其他人，再设置自己。获取：事件处理程序的第一个形参。2. 给当前元素设置样式（留下我自己）1.所有元素全部清除样式（干掉其他人）
复制链接

扫一扫