事件

事件模式：

冒泡：

<!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 += "你点击了我&nbsp&nbsp;";
    else if( oEvent.type == "mouseover")
        oDiv.innerHTML += "你移动到我上方了&nbsp&nbsp;";
        
}
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>