<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body><div id="box" style="background: #ccc;height: 30px;padding: 5px;"><!-- html事件 --><input type="button" id="btn1" value="btn1" onclick="showMsg()"> <!-- DOM0事件 --><input type="button" id="btn2" value="btn2"><!-- DOM2事件 --><input type="button" id="btn3" value="btn3"><!-- 跨浏览器事件 --><input type="button" id="btn4" value="btn4"><!-- 事件对象 --><input type="button" id="btn5" value="btn5"><!-- 事件冒泡 --><input type="button" id="btn6" value="事件冒泡"><!-- 阻止事件冒泡 --><input type="button" id="btn7" value="阻止事件冒泡"><!-- 阻止事件的默认行为 --><a id=“goo” href="http://www.baidu.com">默认能跳转到百度，但是被阻止了</a></div></body><script type="text/javascript">function showMsg() {alert("hello world");}function showMsg2(event){//event是事件alert(event.type);//输出事件的类型alert(event.target);//输出事件目标对象alert(event.target.nodeName);//输出事件目标对象的节点名称}function showMsg3() {alert("你点击了div");}function showMsg4(event) {alert("这次没有点击到div");event.stopPropagation();//停止事件冒泡} function stopHref(event) { alert(1);event.stopPropagation();event.preventDefault(); }var btn2=document.getElementById('btn2');var btn3=document.getElementById('btn3');var btn4=document.getElementById('btn4');var btn5=document.getElementById('btn5');var btn6=document.getElementById('btn6');var box=document.getElementById('box');var btn7=document.getElementById('btn7');var goo=document.getElementById('goo');//DOM0级事件处理程序btn2.onclick=function(){alert("这是通过DOM0级添加的事件");};//btn2.onclick=null;//删除onclick属性//普通浏览器DOM2级事件处理程序//添加事件btn3.addEventListener("click",showMsg,false);//DOM2级能添加多个事件btn3.addEventListener("click",function(){alert(this.value);});//删除事件//btn3.removeEventListener("click",showMsg,false);//IE浏览器下的DOM2级事件处理程序 //添加事件//btn3.attachEvent("onclick",showMsg); //删除事件//btn3.detachEvent('onclick',showMsg);//跨浏览器事件处理程序var eventUtil={//添加句柄addHandler:function(element,type,handler){//如果浏览器支持这个方法，那就运行if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent("on"+type);}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);}else{element["on"+type]=null;}}};//调用处理程序运行事件eventUtil.addHandler(btn4,'click',showMsg);//调用处理程序运行事件eventUtil.addHandler(btn5,'click',showMsg2);//事件冒泡eventUtil.addHandler(btn6,'click',showMsg);eventUtil.addHandler(box,'click',showMsg3);//阻止事件冒泡eventUtil.addHandler(btn7,'click',showMsg4);//阻止事件的默认行为eventUtil.addHandler(goo,'click',stopHref);</script></html>
添加回答
举报
0/150
提交
取消