事件

 <!--

     事件流

        事件冒泡

        事件捕获

        DOM事件流：捕获阶段，目标阶段，冒泡阶段

    

    事件处理程序

        HTML事件处理程序

            在html标签内部直接通过元素包含的特性来定义函数例如：

                <input type="button" value="clickme" name="username" onclick="alert(this.value)">

                <input type="button2" name="username" onclick="alert(username.value)">

                特点：包含event对象

                      this值等于事件的目标元素

                      用with拓展了作用域，使得该事件可以访问其它元素的属性

                缺点：js代码与html代码耦合度高

                      时差问题，页面渲染dom树后事件处理函数未必渲染进去了

                      作用域的拓展在不同浏览器解析时可能导致不同的作用域

        DOM0级事件处理程序

            将事件处理程序赋值给元素的事件处理属性例如

                btn.onclick = function(){}

                btn.onclick = null;

                特点：this指向当前元素

                缺点：对每个事件只支持一个事件处理程序

        DOM2级事件处理程序 ie9+

            addEVentListener（）removeEventListener（）

            参数：事件明，事件处理函数，boolearn值（false冒泡，true捕获）

            btn.addEventListener(click,handler,false)

            btn.removeEventListener(click,handler,false)

            特点:可以为一个元素同时设置多个事件处理函数

            缺点：移除时的参数必须保持一致（也就是说第二个参数不能为匿名函数）

        IE事件处理程序

            attachEvent（） detachEvent（）

            参数：事件名称加on，事件处理函数

            特点：this指向window

                  移除时参数保持一致，也就是说第二个参数不能为匿名函数

    事件对象

        DOM中的事件对象

            DOM0级和DOM2级指定的事件都会传入一个event对象

            event对象的属性很多，自己查阅一下

            特点：this指向的是event.currentTarget

                  event.target只包含事件的实际目标（事件委托中会用到）

                  event.tyoe:被触发的事件类型（一个函数处理多个事件时可以使用）

                  event.preventDefault() 阻止事件默认行为（event.cancelable为true时才可以使用）

                  event.stoppropagation() 阻止冒泡或者捕获（event.bubles为true时才可以使用）

                  event.eventPhase 判断事件处于哪个阶段 捕获阶段为1，目标阶段为2，冒泡阶段为3

        IE中的事件对象

            DOM0级时 event对象通过window.event访问

            attachEvent()  event通过可以用event，也可以用window.event来访问

            HTML事件注册的通过event变量来访问

            特点：window.event.srcElement 指向目标事件

                  window.event.returnValue = false 阻止默认行为

                  window.event.cancelBubble = true 阻止事件冒泡

    事件类型

        UI事件

            load事件

            unload事件

        焦点事件

            blur 失去焦点触发，不会冒泡

            focus 获得焦点时触发，不会冒泡

        鼠标与滚轮事件

            click

            dblclick 双击

            mousedown

            mouseenter

            mouseleave

            mousemove

            mosueout

            mouseover

            mouseup

                鼠标事件对象

                    event.clientX event.clientY 事件发生时鼠标指针在视口中的水平距离和垂直距离

                    event.pageX event.pageY   事件发生时鼠标在页面中的位置（玉面没有滚动时与上相等）

                    event.screenX event.screenY 事件发生时鼠标在屏幕中的坐标

            注意：

                mouseover mouseout事件会涉及相关元素保存在event对象中

                鼠标按钮：click事件中的event对象中保存着button属性用以区分左右键和中间键

                         0表示左键 1 表示中间键 2 表示右键

                         detail属性：表示给定位置发生了多少次单击

            滚轮事件：

                mousewheel 属性wheelDalta （正负值120的倍数用以确定鼠标滚动方向）

                DOMmouseScroll（firfox） detail属性（正负值3的倍数，确定鼠标滚动方向）

        键盘与文本事件

            keydown

            keypress

            keyup

                event对象中保存着keyCode属性

            textInput

                用户编辑区输入字符时才会触发的事件

                event对象中保存着data属性（纪录这用户输入的字符）

                event对象中保存着inputMethod属性（确定用户将文本输入到文本框的方式）

        变动事件

            根据DOM树的变动而触发的事件（只写一两种）

            DOMSubtreeModifiled :在dom解构发生任何拜年话时都会触发，这个事件在其它事件触发后都会触发

            DOMNodeInserted： 在一个节点作为子节点插入另一个节点时触发

            DOMNodeRemoved：在节点从其父节点移除时触发

        HTML5事件

            contextmenu 事件（鼠标右键弹出菜单）

            beforeUNload事件

            OOMContentLoaded事件 （渲染DOM树后直接触发）

            pageshow，pagehide分别在浏览器显示页面时触发（不同与load事件，load时加载完毕后触发）

        移动端事件

            （心累，不写了！！！！！）

    

    内存和性能

        事件委托

        移除处理程序

    

    模拟事件

        1,document.createEvent() 创建event对象

        参数：

            要创建的事件名称

            var event = document.createEvent("MouseEvent")

        2,初始化对象

            不同类型event中初始化的方法不同

            这里：event.initMouseEvnet()   // 传递十五个参数

        3，dispatchEvent（）触发

            element.dispatchEvent(event)

    自定义Dom事件

        以后慢慢深入理解