JavaScript事件分类与处理方式

         JavaScript通过事件(on开头监听函数)与HTML交互，事件源(网页元素、浏览器或其他)上触发事件的同时产生事件对象传递给事件处理程序。

         事件处理程序方式包括：

         A.HTML事件处理程序--->使用与事件处理程序同名的html属性，优点是可以通过参数this访问事件源，通过参数event或直接访问事件对象event对象。缺点是1.事件源触发事件时事件处理程序可能还不具备处理条件2.HTML代码和JavaScript代码紧密耦合

         B.JavaScript事件处理程序--->

             b1.DOM0--->先取得事件源对象，将事件处理函数赋值给事件源对象的事件属性，可以通过this访问事件源，通过任意参数或直接访问事件对象event对象，删除事件处理程序将事件属性置为null即可

             b2.DOM2--->先取得事件源对象，添加事件监听器addEventListener(event,handler,useCapture)，event--->事件，不需要加on；handler--->事件处理函数；useCapture--->是否使用事件捕获，默认false，可以通过this访问事件源，通过任意参数或直接访问事件对象event对象，删除事件处理程序必须要用参数相同的removeEventListener，匿名函数无法移除

             b3.IE独有--->先取得事件源对象，添加事件监听器attachEvent(event,handler)，event--->事件，需要加on；handler--->事件处理函数；只支持事件冒泡，事件处理程序会在全局作用域下运行(this--->window，访问事件源可以通过事件对象的属性srcElement)，通过任意参数或直接访问事件对象event对象，删除事件处理程序必须要用参数相同的detachEvent，匿名函数无法移除

        事件对象event：包含事件的信息，currentTarget--->事件注册源(事件绑定元素)，target--->事件实际源(事件实际触发元素)，type--->事件类型，preventDefault()--->阻止事件默认行为，stopPropagation()--->阻止事件冒泡和捕获行为

        事件分类包括：

        A.鼠标事件--->页面上用鼠标点击页面元素对应的dom节点会触发鼠标事件

           a1.click--->鼠标左键单击

           a2.dblclick--->鼠标左键双击

           a3.mousedown/mouseup--->鼠标按键按下/释放，具有独立属性button(0--->左键、1--->滚轮、2--->右键)

           a4.mousemove--->鼠标移动

           a4+a5应用场景--->鼠标拖动浮动的窗口

           a6.mouseover/mouseout--->鼠标移动至某元素上/鼠标从某元素上移开，具有独立属性relatedTarget--->离开和要去的元素(或者使用fromElement/toElement)

          a7.mouseenter/mouseleave--->同上

          a6+a7应用场景--->配合样式进行选项卡切换

          a6、a7的区别--->a6在子元素上也可以触发而a7不会

          a8.contextmenu--->右键菜单

          a8应用场景--->阻止右键弹出菜单

          a9.selectstart--->左键选中文本

          a9应用场景--->阻止左键复制文字

          a10.mousewheel--->鼠标滚轮，具有独立属性wheelDelta，通过正负号确定滚轮反向

       B.键盘事件--->用键盘输入信息时会触发键盘操作事件

          b1.keydown/keyup--->键盘按键按下/释放

          b2.keypress--->键盘按键按下并松开，具有独立属性charCode表示按键的ASCII码

       C.html事件--->在html节点加载变更等相关事件

          c1.load/unload/beforeunload--->页面、frame、img等嵌入内容完成加载/卸载/卸载之前时触发，img只要设置了src属性无需添加到文档即会开始下载，而script和link需要添加进文档并且设置src属性后才会开始下载

          c2.abort/error--->图像或嵌入内容加载中断/发生错误

          c3.select--->文本选中之后

          c4.change--->域内容被改变，对于<input>和<textarea>元素是失去焦点和value值改变时触发而<select>在选项改变时触发

         c5.focus/blur--->元素获取/失去焦点，不会冒泡

         c6.focusin/focusout--->同上但是会冒泡

         c7.resize--->窗口、框架大小调整

         c8.submit--->提交按钮按下

         c9.textInput--->在可编辑区按下实际输入字符的键触发，具有独立属性data表示用户输入的字符

       D.dom变动事件--->新增节点或删除节点时触发

         d1.DOMNodeRemoved--->使用removeChild或replaceChild从DOM中删除节点触发，属性target表示被删除的节点，relatedNode表示目标节点的父节点，冒泡

         d2.DOMNodeRemovedFromDocument--->移除节点及子节点时触发，属性target表示移除的节点或子节点，不冒泡

         d3.DOMNodeInserted--->使用appendChild或replaceChild或insertBefore向DOM中插入新节点时触发，属性target表示被删除的节点，relatedNode表示目标节点的父节点，冒泡

         d4.DOMNodeInsertedIntoDocument--->新插入的节点上触发，属性target表示移除的节点或子节点，不冒泡

         d5.DOMSubtreeModified--->DOM结构发生变化时触发，属性target表示移除或插入节点的父节点，冒泡

         dom删除/插入节点事件的触发顺序是d1--->d2--->d5/d3--->d4--->d5

      E.其他事件--->页面中一些特殊对象运行过程中产生的事件
         e1.xmlhttprequest

     事件委托：大量的事件处理程序会占用大量内存增加DOM的访问次数影响性能和延迟页面交互就绪时间，利用事件冒泡的原理只指定一个事件处理程序管理某一类型的事件，最适合事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup、keypress

     事件模拟：可以使用JavaScript在任意时刻来触发特定的事件

                     X1.通过事件类型创建事件对象--->var myevent=document.createEvent(eventType)

                     X2.IE创建事件对象--->var myevent=document.createEventObject()

                     Y1.根据事件对象的类型调用特殊的方法进行初始化--->myevent.init...

                     Y2.IE初始化通过手动添加属性--->mye.property=...

                     Z1.在元素上触发事件--->element.dispatchEvent(mye)

                     Z2.IE在元素上触发事件--->element.fireEvent(eventType,mye)，会自动添加type和srcElement属性