锋利的Jquery(p的onclick()事件)

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30613727

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/ElvisZhongShao/p/3939748.html

本文介绍了如何使用JavaScript为HTML中的p元素绑定点击事件。包括为单个p元素绑定事件及通过循环为多个p元素统一绑定事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>