事件是文档/浏览器窗口中发生的，特定的交互瞬间
事件流
事件流——描述的是从页面中接受事件的顺序
IE——事件冒泡流，即事件最开始由最具体的元素（元素中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体那个节点（文档）
Netscape——事件捕获：不太具体的节点应该更早接收到时间，而最具体的节点最后接收到事件。
<html>
<head>
<title>事件流</title>
<meta charset="utf-8">
</head>
<body>
<div id="box"><input type="button" value="按钮" id="btn" οnclick="alert(‘hellow’)"></div>
</body>
</html>
使用事件处理程序
1.html事件处理程序
<body>
<div id="box"><input type="button" value="按钮" id="btn" οnclick="showMessage()"></div>
<script>
function showMessage(){
alert("hellow world!")
}
</script>
</body>
HTML事件的缺点：HTML和JS代码紧密的耦合在一起，如果要更改事件处理程序要同时修改JS和HTML代码
2.DOM0级事件处理程序
较传统的方式：把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势
可以给一个元素上添加多个事件处理程序
<body>
<div id="box">
<input type="button" value="按钮" id="btn" οnclick="showMessage()">
<input type="button" value="按钮2" id="btn2" >
</div>
<script>
function showMessage(){
alert("hellow world!")
}
var btn2=document.getElementById('btn2'); //取得btn2按钮对象
//给btn2添加onclick属性
btn2.οnclick= function(){
alert("这是通过DOM0级添加的事件！")
} 没有HTML事件处理程序的缺点
btn2.οnclick=null; //删除onclicks属性
</script>
</body>
（给谁添加，添加了什么事件，触发这个事件发生了什么事情）
3.DOM2级事件处理程序
可以给一个元素上添加多个事件处理程序
DOM2级事件定义了两个方法： 用于处理指定和删除事件处理程序的操作 addEventListener()添加事件监听和romoverEventListner().
//所有的onclick，onmouseover等都要去掉'on',如onclick只能用click，on要去掉
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true捕获阶段调用处理程序/false冒泡阶段调用处理程序//冒泡阶段可以最大限度的兼容各种浏览器）
<body>
<div id="box">
<input type="button" value="按钮" id="btn" οnclick="showMessage()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮2" id="btn2" >
</div>
<script>
function showMessage(){
alert("hellow world!")
}
var btn3=document.getElementById('btn3')
//DOM2级事件
btn3.addEventListener('click',showMessage,false) //所有的onclick，onmouseover等都要去掉'on',如onclick只能用click，on要去掉
btn3.addEventListener('click',function(){
alert(this.value); //事件触发的function()中关键字this可引用被触发的元素
},false)
//删除事件
// btn3.removeEventListener('click',showMessage,false);
</script>
</body>
addEventListener()添加的事件只能用romoverEventListner()删除
事件触发的function()中关键字this可引用被触发的元素
4.IE事件处理程序
attachEvent()添加事件，detachEvent()删除事件 //要加上on如onclick
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
不使用第三个参数布尔值的原因：IE8以及更早的浏览器版本只支持事件冒泡！
<body>
<div id="box">
<input type="button" value="按钮" id="btn" οnclick="showMessage()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮2" id="btn2" >
</div>
<script>
function showMessage(){
alert("hellow world!")
}
var btn3=document.getElementById('btn3')
btn3.attachEvent("onclick",showMessage);
btn3.detachEvent('onclick',showMessage);
</script>
</body>
5.跨浏览器的事件处理程序
能力检测
<body>
<div id="box">
<input type="button" value="按钮" id="btn" οnclick="showMessage()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮2" id="btn2" >
<a href="event.html" id="go">跳转</a>
</div>
<script>
function showMessage(){
alert("hellow world!")
}
function showBox(){alert("这是个BOX盒子")；}
function stopGoto(){event.stopPropagation();event.preventDefault();}
var btn3=document.getElementById('btn3')
var box=document.getElementById("box")
var go=document.getElementById（“go”）
//跨浏览器事件处理程序
var eventUtil={
//添加句柄
addHeadler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
} //DOM2级事件处理程序判断
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
} //IE事件处理程序判断
else{
element['on'+type] =handler；
//变量和字符串不能用“.”连接，JS中连接属性的时候“.”都可以用'[ ]':element.οnclick===element['onclick']
}
}
//删除句柄
removeHeadler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
} //DOM2级事件处理程序判断
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
} //IE事件处理程序判断
else{
element['on'+type] =null;
}
}
}
eventUtil.addhandler(btn3,'click',showMessage);
eventUtil.addhandler(box,'click',showBox); //冒泡
eventUtil.addhandler(go,"click","stopGoto");//阻止事件的默认行为
eventUtil.removehandler(btn3,'click',showMessage);
</script>
</body>
三.事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象event
1.DOM中的事件对象
（1）.type属性用于获取事件类型<script>dunction showMes(event){alert(event.type)；}</script>
（2）.target属性用于获取事件目标<script>dunction showMes(event){alert(event.target)；}</script>
<script>dunction showMes(event){alert(event.target.nodename)}</script>
（3）.stopPropagation()方法，用于阻止事件冒泡
<script>
dunction showMes(event){
alert(event.target.nodename)；
event.stopPropagation();
}
</script>
（4）.preventDefault()方法，用于阻止事件的默认行为
默认行为：<a href="#">超链接</a>
2.IE中的事件对象
（1）.type属性用于获取事件类型
（2）.srcElement属性 用于获取事件目标
<script>
dunction showMes(event){
event=event || window.event; //在IE8之前的浏览器引入event要用window.event
var ele=event.targrt || event.srcElement;
alert(ele)；}
</script>
（3）.cancelBubble属性，用于阻止事件冒泡
设置为cancelBubble=true表示阻止冒泡 设置为false表示不阻止冒泡
（4）.returnValue属性，用于阻止事件的默认行为
默认为true,设置returnValue=false表示阻止事件的默认行为
//跨浏览器事件处理程序
var eventUtil={
//添加句柄
addHeadler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{
element['on'+type] =handler；
}
},
//删除句柄
removeHeadler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
} //DOM2级事件处理程序判断
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type] =null;
}
},
//获取一个兼容所有浏览器的事件对象
getEvent:function(event){
return event?event:window.event;
},
//获取事件的类型
getType:function(event){return event.type},
//事件来自于哪个元素
getElement:function(event){
return event.target || event.srcElement;
},
//阻止事件默认行为
preventDefault:function(event){
if(event.preventDefault){event.preventDefault();};
else{event.returnValue=false;}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){event.stopPropagation();};
else{event.cancelBubble=true;}
}
}
/****************************************************/
window.οnlοad=function(){
var go=document.getElementById("go");
box=document.getElemnetById('box');
eventUtil.addHandler(box,'click',function(){alert("我是整个父盒子")；});
eventUtil.addHandler(go,"click",function(e){
e=eventUtil.getEvent(e);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
})
}
1888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
