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区分大小写;
时间如白驹过隙,忽然而已,且行且珍惜......