jsDOM事件流

 1 DOM事件流：
 2     事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个过程即DOM事件流。
 3     DOM事件流分为三个阶段：
 4         1，捕获阶段
 5         2，当前目标阶段
 6         3，冒泡阶段
 7     事件冒泡：IE最早提出，事件开始是由最具体的元素接收，然后逐级向上传播到DOM最顶层的阶段
 8     事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
 9     注意：
10         1，js代码中只能执行捕获或者冒泡其中的一个阶段；
11         2，onclick和attachEvent只能得到冒泡阶段；
12         3，addEventListener(‘type‘,listener[,useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序，如果是false或者不写，表示事件冒泡阶段调用事件处理程序；
13         4，onblur,onfocus,onmouseenter,onmouseleave没有冒泡的；
14     事件对象：event对象代表事件的状态，事件发生后，跟事件的一系列信息数据集合都会在这个对象里面
15         eventTarget.onclick = function(event){}
16         eventTarget.addEventListener(‘click‘,function(event){})
17         //event就是事件对象，可以写成e或者evt
18         ie兼容写法：
19             e = e || window.e;
20     常见事件对象的属性和方法：
21         返回触发事件的对象：
22             e.target    //返回触发事件的对象 
23             e.srcElement    //返回触发事件的对象，IE678使用
24         返回事件的类型
25             e.type    //返回事件的类型，比如click，mouseover，不带on
26         阻止默认事件
27             e.returnValue    //该属性阻止默认事件非标准ie678使用，比如不让链接跳转
28             e.preventDefault() //该方法阻止默认事件，标准，比如不让链接跳转，表单提交；
29         阻止冒泡
30             e.stopPropagation()    //阻止冒泡，标准
31             e.cancelBubble    //该属性阻止冒泡，非标准，ie678使用 window.event.cancelBubble = true;
32         阻止冒泡事件兼容性问题：
33             if( e && e.stopPropagation){
34                 e.stopPropagation();
35             }else{
36                 widow.event.cancelBubble = true;
37             }
38     注意：
39         this返回的是绑定事件的对象；
40         e.target返回的是触发事件的对象（元素）
41         currentTarget返回的也是绑定事件的对象，ie678不兼容；
42         return false; 也可以阻止默认行为，没有兼容性问题；return后面的代码也不会执行，addEventListener方法里面没有效果，只在传统方法里面有用；
43     事件委派(代理，委派)
44         事件委派也称事件处理，在jQuery里面也称事件委派
45         事件委托的原理：
46             不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点上；
47     常用的鼠标事件：
48         鼠标事件对象：MouseEvent；
49         e.clientX    //返回鼠标对于浏览器窗口可视区的x坐标
50         e.clentY    //返回鼠标对于浏览器窗口可视区的Y坐标
51         e.pageX        //返回鼠标相对于文档页面的X坐标，IE9+支持
52         e.pageY        //返回鼠标相对于文档页面的Y坐标，IE9+支持
53         e.screenX    //返回鼠标相对于电脑屏幕的X坐标
54         e.screenY    //返回鼠标相对于电脑屏幕的Y坐标
55     常用的键盘事件：
56         onkeyup        //按键弹起触发
57         onkeydown    //按键按下触发
58         onkeypress    //某个键按下触发，不能识别功能键，Ctrl，shift，箭头等等；
59             document.addEventListener(‘keyup‘,function(){    //不能加on
60                 /* 函数体 */
61             })
62             /* 三个事件的执行顺序，keydown-keypress-keyup;     */
63         键盘事件对象：
64             keyCode:    //返回按下键的ASCII码值；
65             keyup&&keydown事件不区分字母大小写，可以press区分大小写；