Javascript中点击（click）事件的3种写法

风情客家__

于 2018-09-20 10:53:31 发布

阅读量4.5w

点赞数 18

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js

原文链接：https://blog.csdn.net/h5css3_linhuai/article/details/56011582

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解了JavaScript中三种实现点击事件的方法，包括直接赋值、addEventListener监听和内联方式，并提供了详细的代码示例。

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

原文地址: Javascript中点击（click）事件的3种写法

方法一：

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript中点击事件方法一</title>
  </head>
  <body>
    <button id="btn">click</button>

    <script type="text/javascript">
      var btn = document.getElementById("btn");
      btn.onclick = function() {
        alert("hello world");
      }
    </script>
  </body>
</html>

消除事件：btn.οnclick=null;

方法二：

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript中点击事件方法二</title>
  </head>
  <body>
    <button id="btn">click</button>
    <script type="text/javascript">
      var btn = document.getElementById("btn");
      btn.addEventListener('click', function() {
        alert("hello wrold");
      }, false)
    </script>
  </body>
</html>

方法三：

<!DOCTYPE html>
<html>
<head>
  <title>Javascript中点击事件方法三</title>
  <script type="text/javascript">
    function test() {
      alert("hello world");
    }
  </script>
</head>
<body>
  <button id="btn" onclick="test()">click</button>
</body>
</html>