[js]事件篇
一、事件流
1.冒泡事件：从特定的事件到不特定事件依次触发；（由DOM层次的底层依次向上冒泡）
（1）示例：
1 <html onclick="add('html<br>')"> 2 <body onclick="add('body<br>');"> 3 <div onclick="add('div<br>');"> 4 <p onclick="add('p<br>');">Click Me</p> 5 </div> 6 <div id="display"></div> 7 </body> 8 </html>
function add(sText){ var oDiv = document.getElementById("display"); oDiv.innerHTML += sText; //输出点击标签名 }
结果如下：
（2）取消冒泡：冒泡事件有时会带来不必要是的事件发生，可通过以下方式取消冒泡
oEvent.cancelBubble=ture; //取消冒泡事件
2、捕获事件：
（1）从最不精确到最精确（ie不支持）
（2）ie中捕获事件：所有事件集中到该对象
obj.setCapture(); //捕获事件 obj.relaseCapture(); //释放捕获事件
二、事件监听方法
从事件角度看，函数响应事件发生--处理函数；从函数角度看，函数监听事件是否发生--监听函数；
1、通用监听方法
（1）在html标签中添加处理函数 例如<p onclick="function(){}"></p>
（2）通过DOM加载对象，直接设置监听函数
2、ie监听方法
obj.attachEvent(event_handle,fnHandler); //添加监听函数 obj.detachEvent(event_handle,fnHandler); //释放监听函数
3.标准DOM监听方法
obj.addEventListener(event_name,fnHandler,bCapture); //添加监听函数 obj.removeEventListener(event_name,fnHandler,bCapture); //释放监听函数
bCapture表示事件类型（ture：捕获/false:冒泡）
4.ie和标准DOM兼容处理方法
1 function addEvent(obj,event,fun) 2 { 3 if(obj.attachEvent) 4 { 5 obj.attachEvent('on'+event,fun); 6 } 7 else 8 { 9 obj.addEventListener(event,fun,false); 10 } 11 }
三、事件对象
（1）IE中的事件对象对以window的属性存在：window.event;
标准DOM中事件对象作为唯一参数传递给事件监听函数;
（2）两种兼容处理方法：
1 function（ev） 2 { 3 var oEvent=ev||window.event; 4 }
1 function(oEvent) 2 { 3 if(window.event) oEvent=window.event; 4 }
1、事件对象类型及其常用属性方法
(1)鼠标位置
clienX/clientY:相对可视区域坐标（不包括滚动的距离）
screenX/screenY:相对屏幕坐标
获取包括滚动位置坐标
1 function getPosition(ev) 2 { 3 oEvent=ev||event; 4 var ollTop=document.documentElement.scrollTop||document.body.scrollTop; 5 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 6 return{x:oEvent.clientX+scrollLeft,y:ev.clientY+scrollTop} 7 }
（2）鼠标事件
click:单击 dbclick：双击
mousedown：按下任意键触发 mouseup：松开任意键触发
mouseover:在某个元素上时候触发 mouseout:移出某一元素
mousemove：在某个元素上移动时候触发
button属性：按键键值：【标准dom：0左键、1中键（滑轮）、2右键、不支持组合键】
（3）键盘事件：
事件：
keydown：按下某个键触发
keypress：按下某个按键产生字符时触发
keyup：释放摸个按键时触发
属性：
event.keycode属性：按键值
event.crtlkey crtl键是否按下
event.shiftkey shift键是否按下
event.alt alt键是否按下
四、默认事件
1、非用户设置，浏览器自身所带的行为；
2、右键菜单事件：
（1）document.oncontxetmenu=function(){}；
（2）
document.onmousedown=function(ev) { var oEvent=ev||window.event; if(oEvent==2){}; }
3、取消默认事件： return false
4、只能输入数字
1 obj.onkeydown=function(ev) 2 { 3 var oEvent=ev||window.event; 4 if(oEvent.Code==8 &&(oEvent.CodekeyCode<48 || oEvent.keyCode>57) ) return false; 5 }
五、html事件
事件名称 触发条件
load 加载完成
unload 卸载完成
error 脚本错误
select 选择文本框多个字
change 文本框失去焦点并且有内容变换
submit 提交
focus 获取焦点
blur 失去焦点
六、自定义事件
// 创建事件 var event = document.createEvent('Event'); // 定义事件名为'build'. event.initEvent('build', true, true); // 监听事件 elem.addEventListener('build', function (e) { // e.target matches elem }, false); // 触发对象可以是任何元素或其他事件目标 elem.dispatchEvent(event);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
七、事件模型
1、EventTarget 接口
addEventListener：绑定事件的监听函数removeEventListener：移除事件的监听函数dispatchEvent：触发事件
(1)target.addEventListener(type, listener[, useCapture]);
type：事件名称，大小写敏感。listener：监听函数。事件发生时，会调用该监听函数。useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发,该参数可选。
