Javascript Event
事件原理
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) { }
事件的类型有很多,不同事件类型的属性在不同浏览器也有差异,这些都需要不断的练习,才能熟练掌握,未完待续。