JavaScript事件

事件绑定：
    1. DOM 0级 事件

       语法：事件源.on事件类型 = 事件处理函数
       注意：给一个事件源的一个事件类型，只能绑定一个事件处理函数

    2. DOM 2级 事件（事件监听器/事件侦听器）

       2-1. 标准浏览器
            语法：addEventListener（'事件类型'，事件处理函数）
        特点：可以给同一个数据源的同一个事件类型绑定多个事件处理函数
              多个事件处理函数，顺序绑定，顺序执行    

       2-2. IE 低版本
        语法：事件源.attachEvent（'on事件类型'，事件处理函数）
        特点：可以给同一个事件源的同一个事件类型绑定多个事件处理函数
              多个事件处理函数，顺序绑定，倒序执行
事件解绑：
    1. DOM 0级 事件解绑
       语法：事件源.on事件类型 = null

    2. DOM 2级 事件解绑

       2-1. 标准浏览器解绑
        语法：事件源.removeEventListener（'事件类型'，事件处理函数）
        
       2-2. IE 低版本解绑
            语法：事件源.datachEvent（'事件类型'，事件处理函数）
        注意：使用 DOM 2级 事件解绑 需要把函数单独书写出来，
              以函数名的形式进行绑定和解绑

事件类型：
    注意：JS的原生事件没有大写字母
    1.鼠标事件
      1-1. click：鼠标左键单击
      1-2. dbclick：鼠标左键双击
      1-3. contextmenu：鼠标右键单击
      1-4. mousedowm：鼠标按下（任何一个鼠标按键按下）
      1-5. mouseup：鼠标按键松开
      1-6. mousemove: 鼠标移动（光标只要位置变换就会触发）
      1-7. mouseover：鼠标移入（光标从事件源外面进入事件源范围内）
      1-8. mouseout：鼠标移出（光标从事件源范围内离开事件源）
      1-9. mousenter：鼠标移入
      1-10. mouseleave：鼠标移出
         移入移出事件的区别
        over/out 一套，不光移入事件源触发，移入子元素也触发
    2.键盘事件（一般不考虑中文输入法）
      2-1. keydowm：键盘按下事件（键盘上的任何一个按键按下都能触发）
      2-2. keyup：键盘抬起事件（键盘上的任何一个按键抬起都能触发）
       2-3. keypress：键盘键入事件（必须按下可以真实键入内容的按键或者回车键，
                           键入的内容必须和按下的内容一致）
    3.浏览器事件
    4.表单事件
      4-1. focus：聚焦事件
      4-2. blur：失焦事件
      4-3. change：改变事件（要求 聚焦 和 失焦 的时候，内容不一致，才会触发）
      4-4. input：输入事件（只要表单元素输入内容或者删除，就会实时触发）
      4-5. reset：重置事件（事件需要绑定给 form 表单，由 form 标签内的 reset 按钮触发）
      4-6. submit：提交事件（事件需要绑定给 form 表单，由 form 标签内的 submit 按钮触发）
    5.触摸事件（移动端事件，只能在移动端设备使用）
      5-1. touchstart：触摸开始
      5-2. touchmove：触摸移动
      5-3. touchend：触摸结束
    6.其他事件
      6-1. selectstart：选择开始（当你去框选页面文本内容的时候触发）
      6-2. transitionend：过渡结束事件（当你元素具有过渡属性的时候，结束以后触发）

事件绑定：
    1.DOM 0级 事件
        语法:事件源.on事件类型= 事件处理函数
     2.DOM 2级 事件
       2-1. 标准浏览器
        语法：事件源.addEventListener（'事件类型'，事件处理函数）
       2-2.IE 低版本浏览器
        语法：事件源.attachEvent（'on事件类型'，事件处理函数）
事件解绑：
    1.DOM 0级 事件解绑
        语法：事件源.on事件类型=null
    2.DOM 2级 事件解绑
       2-1.标准浏览器
         语法：事件源.removeEventListener（'事件类型'，事件处理函数）
       2-2.IE 低版本浏览器
         语法：事件源.detachEvent（'on事件类型'，事件处理函数）2-2.IE 低版本浏览器
         注意：使用 DOM 2级 事件解绑的时候，因为函数是一个复炸数据类型，
                    所以在绑定的时候需要把函数单独书写出来，以函数名的形式进
                    行绑定和解绑
事件对象信息-鼠标事件
    1. clientx 和 clienty
        光标相对于浏览器可视窗口左上角的坐标位置
    2.pagex 和 pagey
         光标相对于文档流左上角的坐标位置
    3.offsetx 和 offsety
         光标相对于触发事件的元素左上角的坐标点
获取事件目标：
    1. 标准浏览器：事件对象.target
    2. IE低版本：事件对象.srcElement
    兼容：var target=e.target || e.srcElement
捕获阶段执行事件：
    DOM 0级 事件绑定没有办法修改
    DOM 2级 事件绑定才可以修改事件的执行阶段
       通过 addEventListener（）的第三个参数来决定
       默认是 false ，表示冒泡阶段
       选填是 true ， 表示捕获阶段
阻止事件传播：
    标准浏览器：事件对象.stopPropagation（）
    IE低版本：事件对象.cancelBubble = true
    兼容：try{} catch（）{} 语法
阻止默认行为：
    标准浏览器：事件对象.preventDefault（）
    IE低版本：事件对象.returnValue = false
    兼容：try{} catch（）{}21:50 2021/10/1