事件处理思维导图

事件处理
  概述
    事件：JavaScript可以侦测到的行为（用户在页面上进行某种操作）：
      页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点事件、键盘事件
    事件处理程序：用户进行了某种操作以后所运行的JavaScript程序段
    事件驱动式：当事件发生后才去执行相应的程序
    事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流
    在web中对事件流的解决方案
      事件捕获：网景公司
        （Netscape）事件流传播的顺序应该是从DOM树的根节店到发生时间的元素节点
      事件冒泡：微软公司
        事件流传播的顺序是从发生事件的元素节点到DOM树的根节点。冒泡的前提是，父级也定义了相同的事件，当子元素与父元素有相同的事件时，子元素被触发时父元素也会触发
      W3C的事件流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理时采用冒泡
    事件捕获的实现：addEventListener(事件名，事件处理程序，事件处理方式useStatus)
  事件的绑定方式
    行内绑定式
      <标签名 事件名="事件处理程序"></标签名>
    动态绑定式
      DOM对象名.事件名 = 事件的处理程序
    注意
      不同点：
        "行内绑定式"中事件名作为标签的属性，"动态绑定式"中事件名作为DOM对象的属性
        行内绑定式"的事件处理程序中的this代表的是window对象，"动态绑定式"的事件处理程序中的this代表的是触发事件DOM对象
      相同点
        一个DOM对象的同一个事件只能有一个事件处理程序
    事件监听式
      可以给DOM对象的同一个事件绑定多个事件处理程序
        DOM对象.attachEvent(type,callback):早期IE浏览器
        DOM对象.addEventListener(type,callback,[capture]):标准浏览器
  删除事件绑定的程序
    DOM对象.removeEventListener
  JS的事件对象
    来源：当事件发生时，都会产生一个事件对象（event对象）
    作用：通过事件对象可以了解与事件相关的信息（DOM对象、事件的类型等）
    获取事件对象
      早期的IE浏览器：window.event
      标准浏览器：将一个event对象直接传入事件处理程序中
    常用属性
      type：返回当前事件的类型
      target：返回触发此事件的元素（事件的目标节点）
      currentTarget：返回触发此事件的元素（事件的目标节点）
      bubbles：返回事件是否是冒泡事件类型
    常用函数
      stopPropagation():阻止事件冒泡
      preventDefault():阻止默认行为
  事件的分类
    页面事件
      load：页面加载事件--用于body内所有标签都加载完以后才触发
      unload：用于页面关闭时触发，经常用于清除变量，避免内存的泄露
    焦点事件：多用于表单验证
      focus：当获得焦点时触发
      blur：失去焦点
    鼠标事件
      click
      dbclick：鼠标双击
      mouseover：鼠标进入
      mouseout：鼠标离开
      change：当内容发生改变时触发---input、select
      mousedown：当按下任意鼠标按键时触发
      mouseup：当释放任意鼠标按键时触发
      mousemove：在元素内当鼠标移动时持续触发
    在鼠标事件中，鼠标的位置信息的获取
      clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X坐标）
      clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y坐标）
      pageX：鼠标指针位于文档的水平座标（X坐标）
      pageY：鼠标指针位于文档的垂直座标（Y坐标）
      screenY：鼠标指针位于屏幕的垂直座标（Y坐标）
    键盘事件
      keypress：键盘上的按键按下时触发，不包含非字符按键。保存的是按键的ASCII码值
      keydown：键盘上按键按下时触发。保存的是按键的虚拟键码
      keyup：键盘按键弹起时触发。保存的是按键的虚拟键码
    表单事件
      submit：当表单提交时触发
      reset：当表单重置时触发
  正则表达式
    什么是正则表达式
      是描述字符串组成结构的语法规则
      是用于匹配字符串中字符组合的模式
      是一个对象
    特点
      灵活
      逻辑性非常强
      以非常简单的方式实现对字符串进行复杂的控制
    创建正则表达式方法
      使用字面量
        var 变量名 = /表达式/
      使用RepExp构造函数
        var 变量名 = RepExp(/表达式/) 
    正则表达式的使用
      test()方法：返回Boolean值。true表示符合正则规则，false表示不符合正则规则
        正则对象.test(被验证的字符串)
      模式修饰符：/表达式/[switch]
        switch：是模式修饰字符，是可选的，通过它可以对正则进行进一步的设置
          g：表示全局匹配
          i：忽略大小写
      边界符
        ^：表示匹配行首的文本（以谁开头）
        $：表示匹配行尾的文本（以谁结尾
      预定义字符
        .  ：除了'\n'之外的任意单个字符
        \d ：表示0到9之间任意数字。等价于[0-9]
        \D ：匹配所有0~9以外的字符。等价于[^0-9]
        \w :匹配任意字母、数字、下划线。等价于[a-zA-Z0-9]
        \W :匹配除所有字母、数字和下划线以外的字符。等价于[^a-zA-Z0-9]
        \b :匹配单词分界符
        \s ：匹配空格（包括换行符、制表符、空格符）。相当于[\t\n\r\f\v]；
      match(正则表达式)方法：是String对象的方法，用来截取符合正则表达式规则的子串
      强调：转义字符"\"，若要输出反斜杠，要使用连续两个"\"
      字符范围示例
        [cat]:匹配字符集合当中任何一个在字符c、a、t
        [^cat]：匹配除c、a、t以外的字符
        [A-Z]：匹配字母A-Z范围内的字符
        [\u4e00-\u9fa5]：匹配任意一个中文字符
      字符组合：如果允许用户输入英文字母（不区分大小写）、数字、短横线、下划线的正则情况
      量词符
        ? :匹配？之前的字符零次或一次，例如hi?t --ht hit
          注意：exec(字符串)：是正则表达式对象的方法，返回值类型是数组
        + :匹配+前面的字符一次或多次例如：bre+ad --bre...
        * :匹配*前面的字符0次或多次。例如bre*ad--brad breee..ad
        {n}:表示匹配{}前面的字符n次，例如hi{3}t--hiiit
        {n,} :表示匹配{}前面的字符最少n次,例如hi{3,}t--hiiii..t
        {n,m} :匹配{}前面的字符n-m次
      括号字符：改变限定符的范围
        改变限定符范围之前：catch|er
          匹配结果：catch、er
        改变限定符范围之后：cat(ch|er)
          匹配结果：catch、cater
        分组
          分组前：abc{2}--表示{}前面的c要出现两次
          分组后：a(bc){2}--表示{}前面的bc要出现两次
    捕获与替换
      使用小括号进行分组，当小括号后面有量词符时，就表示对整个组进行操作
      进行字符串的替换：replace结合正则表达式实现
      贪婪匹配：匹配尽可能多的字符，是正则表达式的默认匹配方式
      懒惰匹配：匹配尽可能少的字符。通过？来实现
      正则表达式的优先级（优先匹配）
        一级：\ 转义字符
        二级：()、[]
        三级：*、+、？、{n}、{n,m}
        四级：^、$、\任何元字符、任何字符