事件
来源：互联网 发布：苹果电脑 拼图排版软件 编辑：程序博客网 时间：2024/04/29 01:10
事件
一、事件流
冒泡事件 从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点；
<head>
<title>无标题文档</title>
<script language="javascript">
function add(cc)
{
var getId=document.getElementById("aa");
getId.innerHTML+=cc; //输出点击顺序
}
</script>
</head>
<body onclick="add('body</br>')">
第一层
<div onclick="add('div</br>')">
第二层
<p onclick="add('p</br>')">
第三层
</p>
</div>
<div id="aa">
</div>
</body>
显示结果：点击第三层时：
点击第二层时：
二、捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递，即与冒泡事件相反。IE不支持事件捕获。
三、事件的监听
简单的通用方法：只能添加单一事件，并且不能将该事件删除
<scriptlanguage="javascript">
window.onload=functionbb()
{
vara=document.getElementById("aa");
a.onclick=functioncc()
{
alert("我被点击了！");
}
}
</script>
</head>
<body>
<div>
<p id="aa">点击事件</p>
</div>
</body>
注：函数名可以省略
IE中事件监听：
<title>IE监听事件</title>
<scriptlanguage="javascript">
vara;
function fun1()
{
alert("我被点击了！");
a.detachEvent("onclick",fun1);//点击一次后，删除监听事件
}
window.onload=function()
{
a=document.getElementById("aa");
a.attachEvent("onclick",fun1);//注册监听事件
}
</script>
</head>
<body>
<div>
<p id="aa">点击事件</p>
</div>
</body>
标准DOM监听事件：
<title>DOM标准监听事件</title>
<scriptlanguage="javascript">
vara;
function fun1()
{
alert("我第一次被点击！");
a.removeEventListener("click",fun1,false);//点击一次后，删除监听事件
}
functionfun2()
{
alert("我第二次被点击！");
a.removeEventListener("click",fun2,false);//点击一次后，删除监听事件
}
window.onload=function()
{
a=document.getElementById("aa");
a.addEventListener("click",fun1,false);//注册监听事件
a.addEventListener("click",fun2,false);//注册监听事件
}
</script>
</head>
<body>
<div>
<p id="aa">点击事件</p>
</div>
</body>
注意：注册和删除监听器中的false（0）表示冒泡型事件，true（1）表示捕获型事件
标准DOM监听事件的鼠标点击事件是click
兼容监听事件：
<title>兼容监听事件</title>
<scriptlanguage="javascript">
vara;
function fun1()
{
alert("我第一次被点击！");
}
window.onload=function()
{
a=document.getElementById("aa");
if(a.attachEvent)
{
a.attachEvent("onclick",fun1);
}
else
{
a.addEventListener("click",fun1,0);//注册监听事件
}
}
</script>
</head>
<body>
<div>
<p id="aa">点击事件</p>
</div>
</body>
四、事件对象
1、IE浏览器中的事件对象是window对象的一个属性event
a.onclick=function()
{
vare=window.event;
}
2、DOM中规定event对象必须作为唯一的一个参数传递给事件处理函数
a.onclick=function(e)
{
}
3、为了兼容两种浏览器，通常采用以下方法：
a.onclick=function(e)
{
If(window.evtent)
{
e=window.event;
}
}
事件对象：
<title>事件对象（兼容）</title>
<scriptlanguage="javascript">
functionfun1(e)
{
varb=document.getElementById("display");
if(window.event)
e=window.event;
if(e.type=="click")
b.innerHTML+="点击事件/n";
elseif(e.type=="mouseover")
b.innerHTML+="移动到我上方/n";
}
window.onload=function()
{
vara=document.getElementById("aa");
a.onclick=fun1;
a.onmouseover=fun1;
}
</script>
</head>
<body>
<div>
<p id="aa">点击事件</p>
</div>
<div id="display">
</div>
</body>
