事件原理
JS的事件原理，先看一段HTML。
Example Click Me
点击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
Stopping Event Propagation Example
事件处理
为事件添加处理函数
HTML
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 hereoDiv.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) {}
事件的类型有很多，不同事件类型的属性在不同浏览器也有差异，这些都需要不断的练习，才能熟练掌握，未完待续。