极客学院第十天整理（事件流）

1、js事件流

        1、事件冒泡

                ie的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点教授）

然后逐级向上传播到较为不具体的节点，所有现代浏览器都支持是事件冒泡

        2、Netscape团队提出的，思想是不太具体的节点应该更早接收到事件，而最具体的节点应该是最后接收到事件

老版本不支持事件捕获

2、html事件处理程序

        1、HTML事件处理程序

                 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

                  js与html之间的交互是通过时间实现的

                 事件使得页面的行为与页面的外观之间实现解耦

                 比如click、load、mouseover、keydown都是事件的名字

                 事件处理程序的名字以“on”开头，比如onclick，onload等

                 

        2、DOM 0级事件处理程序

                外观行为解耦，dom，通过js指定事件处理程序的传统方式，将一个函数赋值给一个时间处理程序

                每个元素（window和document）都有自己的事件处理程序属性，这些属性通常小写，如onclick

                只能绑定一个事件

        3、DOM 2事件处理程序

                添加事件;addEventListener(事件名，函数，布尔值false(冒泡)，true（捕获方式）)

               移除事件：removeEventlistener(事件名，函数，布尔值)

               好处：可以添加多个事件处理程序

        4、IE事件处理程序

              ie实现了与dom类似的两个方法

                  1、添加事件：attachEvent（事件名，处理函数），只能在ie浏览器使用，为全局作用域

                  2、移除事件： detachEvent（事件名，处理函数）

                   默认为事件冒泡

        5、跨浏览器事件处理程序

                   1、兼容性处理

                

2、DOM中的事件对象

         在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息

如导致事件的元素，事件的类型等，所有浏览器都支持event对象，但支持方式不同

        兼容DOM的浏览器会将一个event对象传入到事件处理程序中

          属性：

                 event.target：    事件目标

                 event.type：     被触发的事件类型

          方法：

                 event.preventDefault():    取消事件的默认行为

                 event.stopPropagaton()： 取消事件的进一步捕获或冒泡

3、ie中的事件对象

        1、访问DOM中的event对象不同，要访问ie中的event对象有几种不同的方式，取决于事件处理程序的方式

        2、在使用DOM0级方法添加时，event对象作为windows对象的属性存在

         属性：

                  event.srcElement:   事件目标

                  event.type：被触发事件的类型

                  event.returnValue:  取消事件的默认行为，默认为true

                  event.cancelBubble:  取消事件的冒泡，默认为false

4、浏览器的事件对象

5、UI事件

        1、     UI事件指的是那些用户与页面上的元素交互时触发的事件

        2、     load事件：当页面完全加载后（包括所有图像、就是、css文件等外部资源）触发（页面、框架、img图片） 

                 onload  

        3、    unload事件：当事件在文档被完全卸载后触发

        4、    select事件：当用户选择文本框时触发

        5、     resize事件：当窗口高度或者宽度被调整时触发

        6、    scroll事件：当文档被滚动时触发

5、焦点事件

        1、焦点事件会在页面元素获得或者失去焦点时触发

        2、blur事件：在元素失去焦点时触发

        3、focus事件：在元素获得焦点时触发

        4、onfocusin：元素即将获取焦点时触发

        5、onfocusout：元素即将失去焦点时触发

鼠标事件

键盘事件    

        1、onkeydown ： 某个键盘按键被按下（任意键）

        2、onkeypress ： 某个键盘按键被按下并松开（字符键）

        3、onkeyup： 某个键盘按键被松开

        4、键码：event.keycode