1、一个p元素的点击事件
1 <html xmlns="http://www.w3.org/1999/xhtml" > 2 <head runat="server"> 3 <title>无标题页</title> 4 <script type="text/javascript"> 5 function ClickMe() { 6 alert('张晶是个粪堆'); 7 } 8 </script> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <p onclick="ClickMe();">点击我</p> 14 </div> 15 </form> 16 </body> 17 </html>
2、所有p元素的点击事件
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript"> 6 window.onload = function(){//页面所有元素加载完毕 7 var items = document.getElementsByTagName("p");//获取页面中的所有p元素 8 for(var i=0;i < items.length;i++){ //循环 9 items[i].onclick = function(){ //给每一个p添加onclick事件 10 //doing something... 11 alert("suc!"); 12 } 13 } 14 } 15 </script> 16 </head> 17 <body> 18 <p>测试1</p> 19 <p>测试2</p> 20 </body> 21 </html>
3、带有循环的
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript"> 6 window.onload = function(){//页面所有元素加载完毕 7 var items = document.getElementsByTagName("p");//获取页面中的所有p元素 8 for(var i=0;i < items.length;i++){ //循环 9 items[i].onclick = function(){ //给每一个p添加onclick事件 10 //doing something... 11 alert("suc!"); 12 } 13 } 14 } 15 </script> 16 </head> 17 <body> 18 <p>测试1</p> 19 <p>测试2</p> 20 </body> 21 </html>