第七节课

第七节课

简介

• 事件：就是文档或浏览器窗口发生的一些特定的交互瞬间

• JS就是一门事件驱动为核心的语言

• 事件的三要素

  • 事件源

  • 事件

  • 事件驱动程序

• 总结

  • 事件源：引发后续事件的html标签

  • 事件：js已经定义好了

  • 事件驱动程序：对样式和html的操作，也就是DOM

• 事件代码编写步骤

  • 获取事件源

  • 绑定事件 btn.onclick= function() {事件驱动程序}；

  • 编写事件驱动程序-DOM

• 举例

• 常见的事件

绑定事件的方式

• 绑定匿名函数

• 先单独定义函数，再绑定

• 行内绑定事件

DOM

• JavaScript基础分为三个部分

  • DOM

  • BOM

  • ECMAscript

• 节点Node

  • 构成HTML网页的最基本单元。网页中的每一个部分都可以成为一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点

  • 节点分为四类

    • 文档节点（文档）

      • document

    • 元素节点（标签）

      • HTML标签

    • 属性节点（属性）

      • 元素的属性

    • 文本节点（文本）

      • HTML标签中的文本内容（空格、空行）

• 什么是DOM？

  • Document Object Model

  • 目的就是为了能让js操作html模块

• DOM树

• DOM可以做什么

  • 找元素节点
    

    • 父子兄

      • parentNode
      • children

  • 设置元素的属性值

  • 设置元素的样式

  • 动态创建和删除元素

  • 事件触发响应->事件驱动程序

• DOM父子兄关系
  

  • 获取父节点

    • 节点.parentNode

    • 获取子节点

      • 单个

        • 第一个子元素节点 = 节点.firstElementChild| |节点.fristChild
        • 最后一个子元素节点 = 节点.lastElementChild | |节点.lastchild

        • 获取所有的子节点

          • 子节点数组 = 父节点.childNodes；//W3C标准属性
          • 子节点数组 = 父节点.children;//非标准属性，用的最多

      • 多个

        • childNodes

          • 标准属性，返回指定元素的子节点集合（包括元素节点、所有属性、文本节点）
          • 子节点数组 = 父节点.childNodes；获取所有结点

        • children

          • 非标准属性，返回指定元素的子元素节点集合
          • 子节点数组 = 父节点children；//获取所有结点，用的最多

  • 获取兄弟节点

    • 下一个兄弟节点 = 节点.nextElementSibling| |节点.nextSibling
    • 前一个兄弟节点 = 节点.previousElementSibling| |节点.previousSibling
    • 节点自己.parentNode.children[index];、、随意得到兄弟节点
• 事件对象Event

事件传播

事件冒泡

常见事件等