<script type="text/javascript"> /*事件流分两种:1.冒泡型事件,2.捕获型事件,很可惜的是IE浏览器不支持捕获型事件(不做演示)*/ function add(sText){ odiv=document.getElementById("display"); odiv.innerHTML+=sText; } </script> </head> <!--当点击P标记或者点击div标记或者点击body标记时,display块将会显示传入的参数--> <body οnclick="add('body<br>')"> <div οnclick="add('div<br>')"> <p οnclick="add('p<br>')">Click Me</p> </div> <div id="display"></div> </body> </html> <script type="text/javascript"> /*事件监听:监听函数*/ /*用这种方式可以获得比较好的兼容性,能够保证当点击P标记时,IE和FireFox同时响应用户的点击事件*/ /*该方式只能给P标记添加单一的事件,并且不能将事件删除*/ window.οnlοad=function(){ var op=document.getElementById("myP");//找到对象 op.οnclick=function(){//设置事件监听函数 alert("你被点击了!"); } } </script> </head> <!--当点击P标记或者点击div标记或者点击body标记时,display块将会显示传入的参数--> <body> <div> <p id="myP">Click Me</p> </div> </body> </html> <script type="text/javascript"> /*事件监听:监听函数*/ /*对于IE和标准的DOM,javascript分别提供了不同的方法对事件进行监听*/ /*在IE浏览器中对事件监听的方法*/ /*这种方式在FireFox中没有任何的响应*/ /*IE是一种比较独特的浏览器,它区别于其他标准DOM的浏览器*/ function fnClick(){ alert("你被点击了!"); oP.detachEvent("onclick",fnClick);//点击一次后删除监听函数 } var oP; window.οnlοad=function(){ oP=document.getElementById("myP");//找到对象 oP.attachEvent("onclick",fnClick);//添加监听函数 } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html> <script type="text/javascript"> /*事件监听:监听函数*/ /*标准DOM的浏览器,如FireFox的事件监听*/ /*只在标准DOM浏览器中有效如:FireFox*/ function fnClick1(){ alert("你点击了fnClick1"); oP.removeEventListener("click",fnClick1,false);//删除监听函数2 } function fnClick2(){ alert("你点击了fnClick2"); oP.removeEventListener("click",fnClick2,false) } var oP; window.οnlοad=function(){ oP=document.getElementById("myP"); //注意:这里用的是click而不是onclick. //最后一个参数为false的意思是代表使用的是冒泡型事件而不是捕获型事件. oP.addEventListener("click",fnClick1,false);//添加监听函数. oP.addEventListener("click",fnClick2,false); } /*可以直接看出不管是IE的attachEvent还是标准DOM的addEventListener,可以为同一个标记的事件添加多个监听函数. 这是通用方法中所不能做到的.*/ </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html> /*从刚才所举的三个例子中,对于事件监听不同浏览器的兼容性非常的差,如果需要对次操作需要做对浏览器的兼容性判断*/ <script type="text/javascript"> /*事件对象*/ /*除了监听以外,浏览器还提供了事件对象,让我们很细节的操纵对象的各种属性,以及实用方法*/ /*同样令人头疼的是IE浏览器和标准的DOM浏览器之间的兼容性也非常的差: 1.IE浏览器中事件对象是window对象的一个属性event如: oP.οnclick=function(){ var oEvet=window.event; } 2.标准DOM中规定event对象必须作为唯一的参数传给事件处理函数如: oP.οnclick=function(oEvent){ //..... } 因此为了兼容两种浏览器,通常采用下面的方法: oP.οnclick=function(oEvent){ //这里判断一下浏览器,如果window.event是存在的那么就将window.event赋给oEvent, //否则使用标准DOM使用唯一的参数传给事件处理函数 if(window.event){ oEvent=window.event; } } */ /*事件类型:对于各种事件有非常多的类型,下面通过实力来说明问题*/ function handle(oEvent){ var oDiv=document.getElementById("display"); if(window.event){//处理浏览器兼容性 oEvent=window.event; } if(oEvent.type=="click"){//检测时间名称 oDiv.innerHTML+="你点击了我! "; }else if(oEvent.type=="mouseover"){ oDiv.innerHTML+="你移动到我上方了! "; } } window.οnlοad=function(){ var img=document.getElementsByTagName("img")[0]; img.οnclick=handle; img.οnmοuseοver=handle; } </script> </head> <body> <img id="img1" src="file:///D|/我的文档/My Pictures/1_yylklshmyt20090217.jpg"/> <div id="display"></div> </div> </body> </html>