JS事件对象、环境对象、回调函数 | 前端笔记（十四）

最新推荐文章于 2023-11-05 17:23:26 发布

前端学习记录之路

最新推荐文章于 2023-11-05 17:23:26 发布

阅读量171

点赞数 1

文章标签： javascript 前端笔记

本文链接：https://blog.csdn.net/weixin_55901142/article/details/130462269

版权

（3）事件对象

事件对象：任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来。

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、e 。

语法：

元素.addEventListener('click', function (e) {

}）

常用属性：

e.type：获取当前事件的类型
e.clientX/Y：获取光标相对浏览器窗口左上角的位置
e.offsetX/Y：获取光标相于当前 DOM 元素左上角的位置
e.key：用户按下的键盘键的值

<button>点击</button>

const btn = document.querySelector('button')
btn.addEventListener('click', function (e) {
    console.log(e)
})

<input type="text">

const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
    console.log(e.key)
    if (e.key === 'Enter') {
       console.log('我按下了回车键')
    }
})

按下回车发布评论案例：

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>
  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length)  得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      // 只有按下的是回车键，才会触发
      // console.log(e.key)
      if (e.key === 'Enter') {
        // 如果用户输入的不为空就显示和打印
        if (tx.value.trim()) {
          // console.log(11)
          item.style.display = 'block'
          // console.log(tx.value)  // 用户输入的内容
          text.innerHTML = tx.value

        }
        // 等我们按下回车，结束，清空文本域
        tx.value = ''
        // 按下回车之后，就要把 字符统计 复原
        total.innerHTML = '0/200字'
      }

    })
  </script>
</body>

备注：trim( )方法去除字符串左右两侧的空。

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <script>
    const str = '          im a teacher  '
    // console.log(str.trim())  // 去除字符串左右的空格
    const tx = document.querySelector('textarea')
    tx.addEventListener('keyup', function (e) {
      // console.log(tx.value)
      if (e.key === 'Enter') {
        // console.log(tx.value)
        console.log(tx.value.trim() === '')
      }
    })
  </script>
</body>

（4）环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。this 本质上是一个变量，数据类型为对象。

1.普通函数里面this指向的是window。

function fn() {
   console.log(this)
}
fn()     //实际上是window.fn()

2.事件监听里面this指向的是调用他的对象，就是函数的调用者。

const btn = document.querySelector('button')
btn.addEventListener('click', function () {
    console.log(this)         //this指向的是btn对象
    // btn.style.color = 'red'
    this.style.color = 'red'
})

（5）回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

    function fn() {
      console.log('我是回调函数')
    }
    setInterval(fn, 1000)       //fn传递给了setInterval，fn就是回调函数。

    box.addEventListener('click',function(){
      console.log('我也是回调函数');
    })

备注：不会立马执行，等时机成熟才回头调用函数。

Tab栏切换案例：

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    // 1.1 获取 a 元素 
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(as) 
    for (let i = 0; i < as.length; i++) {
      // console.log(as[i])
      // 要给 5个链接绑定鼠标经过事件
      as[i].addEventListener('mouseenter', function () {
        // console.log('鼠标经过')
        // 排他思想  
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类 active  this 当前的那个 a 
        this.classList.add('active')

        // 下面5个大盒子 一一对应  .item 
        // 干掉别人
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个 item 显示 添加 active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

      })
    }
  </script>
</body>

全选按钮案例：

<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. 获取大复选框
    const checkAll = document.querySelector('#checkAll')
    // 2. 获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3. 点击大复选框  注册事件
    checkAll.addEventListener('click', function () {
      // 得到当前大复选框的选中状态
      // console.log(checkAll.checked)  // 得到 是 true 或者是 false
      // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked
      }
    })
    // 5. 小复选框控制大复选框

    for (let i = 0; i < cks.length; i++) {
      // 5.1 给所有的小复选框添加点击事件
      cks[i].addEventListener('click', function () {
        // 判断选中的小复选框个数 是不是等于  总的小复选框个数
        // 一定要写到点击里面，因为每次要获得最新的个数
        // console.log(document.querySelectorAll('.ck:checked').length)
        // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })
    }
  </script>
</body>

选择被勾选的复选框：

    .ck:checked {
      width: 20px;
      height: 20px;
    }
    
    <input type="checkbox" name="" id="" class="ck">

前端学习记录之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件对象、环境对象、回调函数 | 前端笔记（十四）

/ console.log(checkAll.checked) // 得到是 true 或者是 false。// 4. 遍历所有的小复选框让小复选框的checked = 大复选框的 checked。// console.log(str.trim()) // 去除字符串左右的空格。// console.log(tx.value.length) 得到输入的长度。// console.log(tx.value) // 用户输入的内容。// 一定要写到点击里面，因为每次要获得最新的个数。
复制链接

扫一扫