Javascript单击click的三种写法[0404]

最新推荐文章于 2026-05-10 15:16:19 发布

原创最新推荐文章于 2026-05-10 15:16:19 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#onclick #javascript #单击 #点击

收录于

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了JavaScript中三种实现按钮点击事件的方法：直接赋值onclick属性、使用addEventListener方法及通过HTML标签的onclick属性调用外部函数。每种方法都附有实例代码，帮助读者理解并掌握不同场景下的应用。

Javascript单击click的三种写法[0404]

一、开解：

下面是三种button点击的方法。
1、 btn.onclick=function(){}
2、 btn.addEventListener('click',function(){})
3、 functionbtclick(){} 前提是标签里有onclick="btclick()"

二、实例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<buttonid="btn1">三色方块</button>
<buttonid="btn2">三色方块</button>
<buttononclick="btclick()">三色方块</button>
</body>
<script>
varmbtn1 = document.querySelector('#btn1');
mbtn1.onclick = function(){
alert('hellow world!');

}
/////////////////////////////////////////////////////
varmbtn2 = document.querySelector('#btn2');
mbtn2.addEventListener('click',function () {
alert('hellow world!');
})
////////////////////////////////////////////////////
functionbtclick() {
alert('hellow world!');
}
</script>
</html>