【Web API DOM04】事件类型、对象、解绑-EW帮帮网

一：事件类型

1 鼠标事件

常见鼠标事件

鼠标点击事件：’click‘

鼠标移入事件：‘mouseenter’

鼠标离开事件：‘mouseleave’

鼠标经过事件区别

mouseover和mouseout会有冒泡效果

mouvseenter和mouseleave没有冒泡效果

2 焦点事件

获得焦点：focus

失去焦点：blur

3 键盘事件

键盘按下触发：keydown

键盘弹起触发：keyup

4 文本事件

文本框输入内容触发：input

以上事件类型，通常搭配侦听器一起使用

二：事件对象

1 什么是事件对象

事件是一个对象，事件对象中存储着事件触发时的相关信息

例如：

文本事件触发，能获取到在哪个文本框输入的信息

鼠标点击时，事件对象存储了鼠标点击的位置

2 事件对象在哪里

在事件绑定的回调函数的第一个参数就是事件对象

//以按钮点击事件为例
btn.addEventListener('click',function(event/e){
    
})
//在回调函数第一个参数中填写event或者e，就可以在回调函数中
//通过event/e.属性/方法的方式找到事件对象中有的属性和方法

3 事件对象常用属性

type,获取当前的事件类型
clientX/clientY,获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY,获取光标相对于当前DOM元素左上角的位置
key用户按下的键盘键的值
1. 现在keyCode已经被抛弃

三：事件解绑

语法格式：

removeEventListener(事件类型，事件处理函数，[获取捕获或冒泡阶段])
function fn(){
....
}
btn.removeEventListener('click',fn)

重点：匿名函数无法解绑

四:案例评论回车发布消息

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>评论回车发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }
    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }
    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }
    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }
    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }
    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }
    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }
    .list .item {
      width: 100%;
      display: flex;
    }
    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }
    .list .item p {
      margin: 0;
    }
    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }
    .list .item .text {
      color: #333;
      padding: 10px 0;
    }
    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>
<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 item = document.querySelector('.item')
    const textarea = document.querySelector('textarea')
    const pContent = document.querySelector('.text')
    textarea.addEventListener('keyup', function (e) {
      //Enter键，E大写
      if (e.key === 'Enter') {
        if (textarea.value.trim() !== '') {
          item.style.display = 'block'
          pContent.innerHTML = textarea.value
        }
        textarea.value = ''
      }
    })
  </script>
</body>
</html>

【Web API DOM04】事件类型、对象、解绑