APIs学习记录-tab栏切换，回车发布评论案例（鼠标事件，焦点事件，键盘事件，环境对象）

APIs学习记录-tab栏切换，回车发布评论案例（鼠标事件，焦点事件，键盘事件，环境对象）

一. 知识储备

1）鼠标事件

    btn.addEventListener('click', function () {
    })

click 点击
mouseenter 鼠标经过
mouseleave 鼠标离开

2）焦点事件

focus 获得焦点
blur 失去焦点

3）键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

4）文本事件

imput 用户输入

5）事件对象

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

常见属性：
ev.clientX/clientY 光标相对于浏览器窗口的位置
ev.offsetX/offsetY 光标相对于当前DOM元素的位置
ev.key 用户按下键盘的值

6）环境对象（this）

普通函数里this指的是window
事件处理函数里的this指的是事件源，例如btn
谁调用指向谁

二. 案例

1）回车发送评论

1. 案例要求
   
2. 关键代码

  <script>
    const tx = document.querySelector('#tx') // 文本框
    const total = document.querySelector('.total') // 显示00/200的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) {
      if (e.key === 'Enter') {
        // 如果用户输入的不为空就显示和打印
        if (tx.value.trim()) {
          item.style.display = 'block'
          text.innerHTML = tx.value
        }
        // 按下回车，结束，清空文本域
        tx.value = ''
        // 按下回车之后，需要把 字符统计 复原
        total.innerHTML = '0/200字'
      }                                                                                                                                                                                               
    })
  </script>

2）tab栏切换

1. 案例要求
   
2. 关键代码

  <script>
    const as = document.querySelectorAll('.tab-nav a') // 类数组
    for (let i = 0; i < as.length; i++) {
      // 要给 5个链接绑定鼠标经过事件
      as[i].addEventListener('mouseenter', function () {
        // 1. 高亮导航栏
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类 active  this 当前的那个 a 
        this.classList.add('active')
        // 2. 高亮内容
        // 干掉别人
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个 item 显示 添加 active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      })
    }
  </script>