三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 300px;
height: 100px;
border: 2px solid red;
}
</style>
</head> <body>
<div id="box">
<input type="button" value="按钮1" id="btn1" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<a href="event.html" id="go">跳转</a>
</div>
<script>
//html事件处理程序
function showMes(event) {
alert(event.type);
event.stopPropagation();
} function showBox(event){
alert(event.target.nodeName);
} function stopGo(event){
event.preventDefault();
event.stopPropagation();
} //dom0级事件处理程序
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
var go = document.getElementById("go");
btn2.onclick = function showmessage() {
alert("这是dom0级处理程序");
}
btn2.onclick = null; //删除onclick属性 // //dom2级事件处理程序
// var btn3 = document.getElementById("btn3");
// addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。
// addEventListener("click", function() {
// alert(btn3.value);
// }, false);
// addEventListener("click", function() {
// alert("这是dom2级处理程序");
// }, false);
// removeEventListener("click", showMes, false); //删除事件属性 // //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行 //能力检测 跨浏览器事件处理
var eventutill = {
//添加句柄
addHandler: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;//[]作用等同于".","."不能和字符串紧接着写
}
},//这里记得加逗号
//删除句柄 removeHandler:function(element,type,handler){
if(element,removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element,detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
}
eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
eventutill.addHandler(box,"click",showBox);
eventutill.addHandler(go,"click",stopGo);
//eventutill.addHandler(btn3,“click”,showMes); </script>
</body> </html>
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
var eventutill = {
//添加句柄
addHandler: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;//[]作用等同于".","."不能和字符串紧接着写
}
},//这里记得加逗号
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.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;
}
}
}
编程练习：