事件原理
JS的事件原理，先看一段HTML。
<html>
<head>
<title>Example</title>
</head>
<body onclick=”handleClick()”>
<div onclick=”handleClick()”>Click Me</div>
</body>
</html>
点击Click Me，会发生什么事呢？
DOM支持事件捕获(event capturing)及事件冒泡(event bubbling),前者是netscape浏览器的事件处理机制，后者是ie的处理机制。
netscape的事件捕获模型也叫top-down model，从上往下，直到target(div)。 而IE是从target(div)一直往上传递事件，就像一个气泡从水底往上冒。
例子
这是一个事件冒泡的例子，
alert input
修改这一句
// oEvent.cancelBubble = true;
则alert结果为 input body html
<html onclick="alert('html')">
<head>
<title>Stopping Event Propagation Example</title>
<script type="text/javascript">
function handleClick(oEvent) {
var ie = !-[1,]; // 检测是否IE
alert("input");
if (ie) {
oEvent.cancelBubble = true; // 取消事件冒泡
} else {
oEvent.stopPropagation();
}
}
</script>
</head>
<body onclick="alert('body')">
<input type="button" value="Click Me" onclick="handleClick(event)" />
</body>
</html>
事件处理
为事件添加处理函数
HTML
<div onclick=”alert(‘I was clicked’)”></div>
JS
var oDiv = document.getElementById(“div1”);
oDiv.onclick = function () {
alert(“I was clicked”);
};
IE，每个元素及WINDOW对象都有2个函数: attachEvent, detachEvent.
[Object].attachEvent(“name_of_event_handler”, fnHandler);
[Object].detachEvent(“name_of_event_handler”, fnHandler);
上面的例子可以写成如下形式
var fnClick = function () {
alert(“Clicked!”);
};
var oDiv = document.getElementById(“div”);
oDiv.attachEvent(“onclick”, fnClick); //add the event handler
//do some other stuff here
oDiv.detachEvent(“onclick”, fnClick); //remove the event handler
也同时可以为一个事件指派多个Handler。
Netscape Dom method
[Object].addEventListener(“name_of_event”, fnHandler, bCapture);
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);
添加事件处理函数
var fnClick1 = function () {
alert(“Clicked!”);
};
var fnClick2 = function () {
alert(“Also clicked!”);
};
var oDiv = document.getElementById(“div1”);
oDiv.addEventListener(“onclick”, fnClick1);
oDiv.addEventListener(“onclick”, fnClick2);
事件对象
当一个事件发生时，我们需要知道这个事件的一些细节，如
1，那个对象引起的事件
2，事件发生时，鼠标的相关信息
3，事件发生时，键盘的相关信息
这些细节在IE及其他浏览器的获取方式是不同的，
IE
oDiv.onclick = function () {
var oEvent = window.event;
}
Netscape
oDiv.onclick = function () {
var oEvent = arguments[0];
}
oDiv.onclick = function (oEvent) {
}
事件的类型有很多，不同事件类型的属性在不同浏览器也有差异，这些都需要不断的练习，才能熟练掌握，未完待续。