事件模式：
冒泡：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>冒泡型事件</title> <script language="javascript"> function add(sText){ var oDiv = document.getElementById("display"); oDiv.innerHTML += sText; //输出点击顺序 } </script> </head> <body onclick="add('body<br>');"> <div onclick="add('div<br>');"> <p onclick="add('p<br>');">Click Me</p> </div> <div id="display"></div> </body> </html>
顺序执行：p->div->body->document
捕获：
ie浏览器不支持
事件监听：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>监听函数</title> <script language="javascript"> window.onload = function(){ var oP = document.getElementById("myP"); //找到对象 oP.onclick = function(){ //设置事件监听函数 alert('我被点击了'); } } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html>
ie：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>IE的监听函数</title> <script language="javascript"> function fnClick(){ alert("我被点击了"); oP.detachEvent("onclick",fnClick); //点击了一次后删除监听函数 } var oP; window.onload = function(){ oP = document.getElementById("myP"); //找到对象 oP.attachEvent("onclick",fnClick); //添加监听函数 } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html>
ff：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>标准DOM的事件监听</title> <script language="javascript"> function fnClick1(){ alert("我被fnClick1点击了"); //oP.removeEventListener("click",fnClick2,false); //删除监听函数2 } function fnClick2(){ alert("我被fnClick2点击了"); } var oP; window.onload = function(){ oP = document.getElementById("myP"); //找到对象 oP.addEventListener("click",fnClick1,false); //添加监听函数1 oP.addEventListener("click",fnClick2,false); //添加监听函数2 } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html>
事件对象：
IE浏览器中事件对象是window对象的一个属性event
oP.onclick = function(){
var oEvent=window.event; }
DOM 中规定event对象必须作为唯一的参数传给事件处理函数
oP.onclick = function(oEvent)
{}
为了兼容两种浏览器，通常采用下边的方法：
oP.onclick = function(oEvent)
{
if(window.event)oEvent=window.event;
}
事件类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>事件的类型</title> <script language="javascript"> function handle(oEvent){ var oDiv = document.getElementById("display"); if(window.event) oEvent = window.event; //处理兼容性，获得事件对象 if(oEvent.type == "click") //检测事件名称 oDiv.innerHTML += "你点击了我  "; else if( oEvent.type == "mouseover") oDiv.innerHTML += "你移动到我上方了  "; } window.onload = function(){ var oImg = document.getElementsByTagName("img")[0]; oImg.onclick = handle; oImg.onmouseover = handle; } </script> </head> <body> <img src="01.jpg" border="0"> <div id="display"></div> </body> </html>