web APIs_day02

目标：能给元素添加事件，并利用事件做常见的网页交互效果 模型: 用户在某个元素上触发了某种行为执行了对应的事情 事件源 事件类型 事件处理函数 DOM L0 事件源.on事件类型 = function(){} DOM L2 事件源.addEventListener(事件类型， 事件处理函数) 语法: 事件监听 DOM L0 ：是 DOM 的发展的第一个版本； L：level DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准 DOM L2：使用addEventListener注册

webApi

• day02-DOM-事件基础
  • 目标：能给元素添加事件，并利用事件做常见的网页交互效果
  • 事件
    • 模型: 用户在某个元素上触发了某种行为执行了对应的事情
    • 事件监听
      • 事件源
      • 事件类型
      • 事件处理函数
      • 语法:
        • DOM L0 事件源.on事件类型 = function(){}
        • DOM L2 事件源.addEventListener(事件类型， 事件处理函数)
    • 拓展阅读
      • DOM L0 ：是 DOM 的发展的第一个版本； L：level
      • DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准
      • DOM L2：使用addEventListener注册事件
      • DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
        • - 焦点事件，当元素获得或者失去焦点时触发；
        • - 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
        • - 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
        • - 文本事件，当在文档中，输入文本时触发；input
        • - 键盘事件，当用户通过键盘在页面上执行操作时触发；
    • 常见的事件类型
      • 鼠标事件
        • click
        • mouseenter, mouseleave
      • 焦点事件
        • focus, blur
      • 键盘事件
        • keydown
          • 键盘按下触发
            • 会在值落到表单之前触发, 所以获取的结果是上一次的结果
        • keyup
          • 键盘抬起触发
            • 会在值落到表单之后触发, 所有获取的是当前这一次的结果
      • 文本事件
        • input
    • 综合案例1
      • 随机点名案例
        • 抽完为止
        • 名字不停的闪动
    • 注意点
      • 事件处理函数不会主动执行,必须触发才会执行, 触发一次就会重新执行一次
      • 事件处理函数里面的内容最后执行
  • 课堂小练习
    • 点击事件
      • click
      • mouseenter,mouseleave
    • 模拟小米搜索框
      • focus, blur
    • 针对表单案例
      • 微博发布案例-显示输入字数
        • 验证表单
        • input事件
        • str.length
      • 表单全选
        • 需求1
          • 给全选表单添加点击事件
          • 在事件中将自己的checked状态赋值给每一个checkbox
        • 需求2
          • 点击下面所有的checkbox去控制全选的状态
          • 思路
            • 遍历下面的所有的checkbox,添加点击事件
            • 在事件内部,遍历所有的checkboxs状态,只要有一个为false 就将全选状态设置为false 并且直接return
            • 在循环结束将全选的状态直接设置为true
        • 展示
      • 购物车加减操作
        • 给添加按钮注册点击事件, 获取表单的value,然后自增
        • 解除减号的disabled状态
        • 给减号按钮添加点击事件,获取表单的value,然后自减
        • 自减结束需要判断,如果结果小于等于1 则添加上disabled状态
        • 展示：
  • 高阶函数
    • 高阶函数的定义：高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待
    • 函数表达式
      • 把函数当值赋值给变量
    • 回调函数
      • 把函数作为参数传递给另外一个函数
      • 以前的接触过的回调函数 定时器
    • 生活中的例子：
      • 送女朋友回家，上楼到家发微信
  • 环境对象
    • this
      • 环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
    • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
    • 语义： this这个， btn.fn 函数是谁调用的？是btn这个按钮调用的
  • 编程思想
    • 排他思想
      • 当前元素为A状态,其他元素为B状态
      • 使用
        • 干掉所有人
          • 使用for循环
        • 复活他自己
          • 通过this或者下标找到自己或者对应的元素
  • 综合案例
    • tab栏切换案例