事件是文档/浏览器窗口中发生的,特定的交互瞬间
事件流
事件流——描述的是从页面中接受事件的顺序
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);
})
}