如何在按下按钮时调用JavaScript或jQuery的click事件？

嘿，这事儿简单！我来给你拆解下怎么用原生JavaScript或者jQuery实现这个按钮的点击事件，先看你提供的HTML结构：

<form action="#" method="get">
  <button type="submit">Turn to the dark side</button>
</form>

注意哦，这个按钮是type="submit"，点击它默认会触发表单的提交行为（页面可能会刷新或者跳转），所以我们实现事件的时候通常需要阻止这个默认行为，不然自定义的逻辑可能看不到效果。

这里有两种常用的思路，你可以根据需求选：

• 思路1：直接给按钮绑定click事件
  先给按钮加个id方便我们选中它，修改后的HTML：

  <form action="#" method="get">
    <button type="submit" id="darkSideBtn">Turn to the dark side</button>
  </form>
  

  然后写JavaScript代码：

  // 获取按钮元素
  const darkBtn = document.getElementById('darkSideBtn');
  // 绑定click事件
  darkBtn.addEventListener('click', function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    // 这里写你要执行的逻辑，比如打印提示
    console.log("Welcome to the dark side!");
    // 其他操作：比如修改页面内容、发送请求等等
  });
  

• 思路2：监听表单的submit事件
  这种方式更稳妥，因为即使用户通过回车键提交表单（而不是点击按钮），你的逻辑也能触发：

  // 获取表单元素
  const form = document.querySelector('form');
  // 绑定submit事件
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    console.log("You've joined the dark side successfully!");
    // 你的业务逻辑在这里
  });
  

如果项目里已经引入了jQuery，写法会更简洁：

首先确保你已经引入了jQuery（比如在页面底部添加本地jQuery文件或者CDN链接），然后：

• 思路1：绑定按钮的click事件
  可以给按钮加个类名来选中它：

  <form action="#" method="get">
    <button type="submit" class="dark-side-btn">Turn to the dark side</button>
  </form>
  

  jQuery代码：

  $('.dark-side-btn').click(function(event) {
    // 阻止默认提交
    event.preventDefault();
    console.log("May the dark side be with you!");
    // 你的逻辑代码
  });
  

• 思路2：监听表单的submit事件
  同样支持回车提交的场景：

  $('form').submit(function(event) {
    event.preventDefault();
    console.log("Submit triggered, dark side awaits!");
    // 执行你的操作
  });
  

不管用哪种方式，核心都是绑定事件+按需阻止默认行为，这样就能在点击按钮时完美执行你想要的代码啦！

内容的提问来源于stack exchange，提问作者J Script