事件
JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件流
事件流描述的是从页面中接收事件的顺序。
IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流。
事件冒泡
IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获
事件捕获是不太具体的节点应更早接收到事件,而最具体的节点应该最后接收到事件。由于老版本的浏览器不支持,因此很少有人使用事件捕获。
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件处理程序
事件就是用户或浏览器自身执行的某种动作,如click、load、mouseover,都是事件。而响应某个事件的函数就是事件处理函数(或事件侦听器)。事件处理程序的名字以”on”开头,因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。
HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定,这个特性的值应该是能够执行的JavaScript代码。例如:
<script type="text/javascript">
function showMessage(){
alert("hello world!")
}
</script>
<input type="button" value="Click me" onclick="showMessage()"/>
DOM0级事件处理程序
每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick,将这种属性的值设置为一个函数,就可以指定事件处理程序。例如:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("clicked");
};
使用DOM0级方法指定的事件处理程序被认为是元素的方法。这时候的事件处理程序是在元素的作用域中运行,换句话说,程序中的this引用当前元素。
也可以通过删除DOM0级方法指定的事件处理程序,例如:
btn.click = null;
DOM2级事件处理程序
“DOM2级事件”定了两个方法,用于指定和删除事件处理程序的操作:addEventListener()、removeEventListener()。所有DOM节点中都包含这两个方法,并且他们都接收3个参数:要处理的事件名、作为事件处理程序的函数和布尔值。布尔值为true,表示在捕获阶段调用事件处理函数;布尔值为false,表示在冒泡阶段调用事件处理函数。例如:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除,移除时传入的参数与添加事件处理程序时使用的参数相同,这也意味着addEventListener()添加的匿名函数无法移除。例如:
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。
IE事件处理程序
IE实现了与DOM中类似地两个方法:attachEvent()和detachEvent()。这两个方法接收相同地两个参数:事件处理程序名称,事件处理程序函数。通过attachEvent()添加地事件处理程序都会添加到冒泡阶段。例如:
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。
跨浏览器的事件处理程序
var EventUtil = {
addHandler : function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else(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(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
}
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
事件对象
在触发DOM上的某个事件时,会产生一个事件对象Event,这个对象中包含着所有与事件有关的信息。
DOM中的事件对象
- type属性用于获取事件类型
- target属性用于获取事件目标
- stopPropagation()用于阻止事件冒泡
- preventDefault()阻止事件的默认行为
IE中的事件对象
- type属性用于获取事件类型
- srcElement属性用于获取事件目标
- cancelBubble属性用于阻止事件冒泡
- returnValue属性用于阻止事件的默认行为
跨浏览器的事件对象
var EventUtil = {
addHandler : function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else(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(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
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;//取消事件默认行为
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true; //取消事件冒泡
}
}
};
事件类型
- UI事件,当用户与页面上的元素交互时触发
- 焦点事件,当元素获得或失去焦点时触发
- 鼠标事件,当用户通过鼠标在页面执行操作时触发
- 滚轮事件,当使用鼠标滚轮时触发
- 文本事件,当在文档中输入文本时触发
- 键盘事件,当用于通过键盘在页面执行操作时触发
- 合成事件,当为IME输入字符时触发
- 变动事件,当底层DOM发生变化时触发
UI事件
- load:当页面完全加载后在window触发
- unload:当页面完全卸载后在window触发
- resize:当窗口或框架的大小变化时在window或框架上面触发
scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发
焦点事件
blur:在元素失去焦点时触发
- DOMFocusIn:在元素获得焦点时触发
- DOMFocusOut:在元素失去焦点时触发
- focus:在元素获得焦点时触发
- focusin:在元素获得焦点时触发
- focusout:在元素失去焦点时触发
鼠标与滚轮事件
- click:在用户单击主鼠标按钮或者按下回车键时触发
- dblclick:在用户双击主鼠标时触发
- mousedown:在用户按下任意鼠标按钮时触发
- mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发
- mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发
- mousemove:当鼠标指针在元素内部移动时重复触发
- mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发
- mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发
- mouseup:在用户释放鼠标按钮时触发