- 事件流
描述从页面中接收事件的顺序
- 事件冒泡
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点 - 事件捕获
不太具体的节点应该更早收到事件，最具体的节点应该最后收到事件 - DOM事件流
包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会，然后是实际目标接收到了事件，最后一个阶段是冒泡阶段，在这个阶段对事件作出响应
- 事件处理程序
- DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
};
btn.onclick = null;//删除事件处理程序
- DOM2级事件处理程序
定义了两个方法，用于处理指定和删除事件处理程序的操作addEventListener() 和removeEventListener()，所有DOM节点都包含这liang两种方法并接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true，表示在捕获阶段调用事件处理程序，为false表示在冒泡阶段调用事件处理程序
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
好处：可以给一个元素添加多个事件处理程序
注意是click而不是onclick
通过addEventListener()添加的事件处理程序必须用removeEventListener()来移除-----相同的函数
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
- IE事件处理程序
IE定义了两个方法，attachEvent()和detachEvent(),接收两个参数，事件处理程序名称和事件处理程序函数
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);
- 跨浏览器的事件处理程序
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
} }
};
- 事件对象
- DOM中的事件对象
var btn = document.getElementById("myBtn");
btn.onclick = function(event){ alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click" }, false);
event的属性和方法
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| bubbles | Boolean | 表明事件是否冒泡 |
| cancelable | Boolean | 表示是否可以取消事件的默认行为 |
| currentTarget | Element | 其事件处理程序当前正在处理事件的那个元素 |
| defaultPrevented | Boolean | 为true表示已经调用了preventDefault() |
| detail | Integer | 与事件相关的细节信息 |
| eventPhase | Integer | 调用事件处理程序的阶段，1表示捕获阶段，2表示处于目标，3表示冒泡阶段 |
| preventDefault() | Function | 取消事件的默认行为，cancelable为true时可调用这个方法 |
| stopImmediatePropagation() | Function | 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用 |
| stopImmediatePropagation() | Function | 取消事件的进一步捕获或冒泡，bubbles为true时可调用这个方法 |
| target | Element | 事件的目标 |
| trusted | Boolean | 为true表示是浏览器生成的 |
| type | String | 被触发的事件类型 |
| view | AbstractView | 与事件关联的抽象视图，等同于发生事件的window对象 |
Tips:只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会被销毁
- IE中的事件对象
event对象作为window对象的一个属性存在
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| cancelBubble | Boolean | 为true可取消事件冒泡 |
| returnValue | Boolean | 为false可取消事件默认行为 |
| srcElement | Element | 事件的目标 |
| type | String | 被触发的事件的类型 |
- 跨浏览器的事件对象
var EventUtil = {
addHandler: function(element, type, handler){
// 的代码 },
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
} }
};
4.事件类型
- UI事件
DOMActivate:表示元素已经被用户操作激活
load：页面全部加载完在window上触发；所有框架加载完在框架集触发；图像加载完在img元素上触发;嵌入内容加载完毕在object元素上触发
unload:页面全部卸载完在window上触发；所有框架卸载后在框架集触发；嵌入内容卸载完毕在object元素上触发//清除引用，避免内存泄漏
abort:用户停止下载
error:发生错误
select:选择文本框时触发
resize:窗口或框架大小变化
scroll:用户滚动带滚动条的元素内容
- 焦点事件
一般与document.hasFocus()方法及document.activeElement属性配合
blur:元素失去焦点时触发，不冒泡
focus：元素获得焦点时触发，不冒泡
focusout:元素失去焦点时触发，冒泡
focusin:元素获得焦点时触发，冒泡
焦点从一个元素移动到另一个元素依次触发
（1）focusout在失去焦点的元素上触发
（2）focusin在获取焦点的元素上触发
（3）blur:在失去焦点的元素上触发
（4）focus:在获得焦点的元素上触发
- 鼠标与滚轮事件
click:单击鼠标或者按回车键
dblclick:双击鼠标
mousedown：按下鼠标任意按钮
mouseenter：在鼠标光标从元素外部首次移动到元素范围内触发
mouseleave:位于元素内部的鼠标光标移动到元素范围外触发
mousemove:鼠标指针在元素内部移动时反复触发
mouseout:鼠标指针从一个元素移动到另一个元素时触发
mouseover:鼠标位于一个元素外部，用户将其首次移入另一个元素边界之内触发
mousemap:释放鼠标按钮时触发
//除了mouseenter和mouseleave,其余都会冒泡
- 键盘与文本事件
keydown:按下键盘任意键触发
keypress:按下键盘字符键触发
keyup:释放键盘上键时触发
- 触摸与手势事件
触摸事件
touchstart:手指触摸屏幕时触发
touchmove:手指在屏幕上滑动时连续地触发
touchend:手指在屏幕上移开时触发
touchcancel:系统停止跟踪触摸时触发
touch包含的属性
clientX:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:表示触摸的唯一ID
pageX:触摸目标在页面中的x坐标
pageY:触摸目标在页面中的y坐标
screenX:触摸目标在屏幕中的x坐标
screenY:触摸目标在屏幕中的y坐标
target:触摸的DOM节点目标
手势事件
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发
gestureend：当任何一个手指从屏幕上面移开时触发