webApi

day04-DOM-事件高级

目标：熟悉事件对象的使用，具备利用操作数组对象渲染订单系统的能力

事件对象

• 获取事件对象: 在事件处理函数中里面接受一个形参即可

• 按键事件常用属性

  • e.key

    • keyup

      • 获取的是当前这一次的value

    • keydown

      • 获取的value是上一次的value

    • 注意： 不建议再使用 keyCode

  • e.which

    • 键码

  • 案例： 给发布微博案例添加按下回车发布新闻案例

• 单击事件常见属性

  • e.clientX/e.clientY

    • 鼠标单击位置参照视口的坐标值

  • e.offsetX/e.offsetY

    • 鼠标单击位置参照元素左上角的坐标值

  • e.screenX/e.screenY

    • 鼠标单击位置参照屏幕左上角的坐标值

• e.target

  • 当前真正触发事件的元素对象

事件流

• 事件流

  • 过程: 事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流
  • 实际工作都是使用事件冒泡为主

• 事件捕获

  • 概念: 从DOM的根元素开始去执行对应的事件 (从外到里)

  • 捕获机制必须使用事件监听的形式注册

    • DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

      • 第三个参数为true:捕获阶段触发事件
      • false代表冒泡阶段触发事件-默认值

• 事件冒泡

  • 概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

  • 事件冒泡的必要性

    • 如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行

    • 事件委托

      • 自己不注册事件,将对应的事件注册给祖先元素
      • 减少事件的注册,提高效率
      • e.target => 当前点击的那个元素

  • 阻止事件冒泡

    • 1. 先要明确那一块区域不能冒泡
    • 2. 需要阻止什么事件传递就给这块区域的最大盒子注册该事件
    • 3. 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()

• 阻止冒泡和默认行为

  • e.stopPropagation()

    • 阻止事件冒泡

  • e.preventDefault()

    • 链接的跳转
    • 表单域跳转

• 事件注册的两种方式区别

  • 传统on注册

    • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
    • 直接使用null覆盖偶就可以实现事件的解绑
    • 都是冒泡阶段执行的

  • 事件监听注册

    • 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

    • 后面注册的事件不会覆盖前面注册的事件(同一个事件)

    • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

    • 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

      • 匿名函数无法被解绑

• mouseover和 mouseenter的区别

事件委托

• 优点

  • 减少事件的注册，只需要注册化父容器
  • 可以为已存在和未来的元素注册事件，注册一次，现在未来通用

• 原理：

  • 利用冒泡

• 使用场景：动态的渲染的元素的事件注册使用委托，动态渲染的元素的事件只能使用委托

综合案例-购物车案例

综合案例-渲染学生信息案例

• 业务拆分

  • 查询（动态渲染）操作第一个完成

    • 静态结构

    • 数据

    • 现在实现方式1：遍历数据，拼接html结构，最终将结果赋值给某个容器

      • innerHTML

    • 方式2：创建元素，设置内容，追加到指定的容器中

      • createElement
      • appendChild

  • 添加

    • 最关键的准备你要添加的数据，我们的核心任务是收集用户信息，准备好完整的数据

      • stuId:

        • 获取数组中最后一个元素对象的stuId值 +１
        • 如果数组为空，stuId 为1001

      • uname:表单元素

      • age: 表单元素

      • gender: 表单元素

      • salary:表单元素

      • city: 表单元素

    • 添加的页面效果是：在表格中多出一行新增的数据

      • 方式1：

        • 根据数据创建一个新行，追加到tbody中

      • 方式2

        • 将生成的数据对象，追加到数组中，重新渲染

          • 追加数据到数组
          • 将渲染过程封装为函数
          • 调用函数

  • 删除

    • 删除一定体现到数据

      • 删除按钮的事件绑定应该要使用委托

      • 删除数组中的指定位置的元素

        • arr.splice(索引,1)

      • 重新渲染

    • 经验

      • 如果一个业务需要某个值才能进行，我们一般有两种方式来处理

        • 如果可以传递参数就传递参数

        • 先存储再获取

          • 存储在那里

            • 如何取值方便来决定

          • 存储什么

            • 基于业务需求

          • 如何获取