3、关于onclick事件的两种写法

最新推荐文章于 2025-06-26 19:22:18 发布

原创最新推荐文章于 2025-06-26 19:22:18 发布 · 2.5w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#点击事件 #点击事件的写法 #利用JS写onclick #onclick

JavaScript_Bak 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了HTML中使用onclick属性直接绑定事件与通过JavaScript为元素添加事件监听器的两种常见方式。前者展示了如何直接在HTML标签内定义点击事件，后者则通过window.onload事件设置div2的点击事件。

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

1、关于onclick的两种,常见的写法

1.1 html的源码如下

<style type="text/css">
  #div1,
  #div2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
</style>

<body>
<div id="div1" onclick="div1();">我是div1 </div>
<div id="div2">我是div2</div>
</body>

1.2 Javascript代码

<script type="text/javascript">
		/**
		* 用于响应div1的点击事件
		 */
		function div1() {
			var div1 = document.getElementById('div1');
			alert(div1.innerHTML)
		}
		/**
		* 用于响应div2的点击事件
		*/
		window.onload = function() {
			var div2 = document.getElementById('div2');
			div2.onclick = function() {
			alert(this.innerHTML)
			}
		}
</script>