js 事件
事件冒泡:即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级上传播到较为不具体的节点(文档)。所有浏览器都支持,但IE如下:
<html>
<head>
<title>lin3615</title>
</head>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果点击了页面的 div 元素,则传播顺序为
div -> body -> html -> document
document 4 ↖
element html 3 ↖
element body 2 ↖
element div 1 ↖
firefox 等则用的是事件流叫事件捕获,其思想是从不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。如上面代码, div 元素被点击了,则生顺序如下
document -> html -> body ->div
document ↘
html ↘
body ↘
div ↘
DOM事件流,(IE不支持)
事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件。最后才是冒泡阶段。
1↘ document 7↖
2↘ html 6↖
3↘ body 5↖
div 4↖
事件处理程序(或事件侦听器)
事件就是用户或浏览器自身执行的某种动作,诸如 click,load 和 mouseove,都是事件的名字。而响应事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字是以 "on"开头,因此, click 事件的事件处理程序就是 onclick,load 事件的处理程序就是 onload.为事件指定处理程序的方式有几种,如下
HTML事件处理程序:
<input type="button" value="click me" onclick="alert('lin3615')" />
DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick=function()
{
alert("lin3615");
}
DOM2级事件处理程序(少用为好)
定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener(),它们都接受三个参数,要处理的事件名,作为事件处理程序的函数和一个布尔值,和一个布尔值。最后一个值如果是 true,表示在捕获阶段调用事件处理程序。如果是 false,表示在冒泡阶段调用事件处理程序.
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
可以添加多个事件:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("hi,lin3615");
}, false);
通过 addEventListener()添加的事件,只能用 removeEventListener()来先移除。上面是通过匿名函数加入的,所以无法销除。
只有如下的方式才能销除
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
IE事件处理程序
有两个类似的方法: attachEvent() 和 detachEvent();这两个方法接受参数相同:事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡,所以通过 attachEvent添加的事件处理程序都会被添加到冒泡阶段。
var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function(){
alert("hi");
});
此时的事件程序名称为 onclick
同样可以添加多个事件处理程序
var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function(){
alert("hi")
});
btn.attacheEvent("onclick", function(){
alert("lin3615");
});
detachEvent()移除相应的事件处理程序
var btn = document.getElementById("myBtn");
var handler = function(){
alert("lin3615");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);
==============
跨浏览器事件处理程序
var btn = document.getElementById("myDiv");
var handler = function(){
alert("lin3615");
};
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;
}
}
};
// 添加事件
EventUtil.addHandler(btn, "click", handler);
// 移除事件
EventUtil.removeHandler(btn, "click", handler);
==============
事件类型
鼠标事件:lick,dblclick,mousedown,mouseout,mouseover,mousemove,mouseup
键盘事件
keydown, keypress, keyup
html 事件:load/unload/abort/error/select/change/submit/reset/resize/scr
oll/focus/blur