三、事件对象
事件对象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; } } }
编程练习：