JavaScript点击事件的三种写法与触发方式详解

作者：流萤时间：2026-10-30 09:50:37浏览：519

本文介绍了JavaScript中绑定点击事件的三种常见方式，包括直接赋值、addEventListener以及HTML内联属性。重点解析了通过btnObj.click()程序触发点击与直接调用btnObj.onclick()执行方法的区别，前者真正触发事件流，后者仅执行函数逻辑。


<button id="btn">click</button>
var btn=document.getElementById('btn');

JavaScript点击事件的三种绑定方式

第一种实现方式如下：


btn.onclick=function(){
alert('hello world');
}

若要移除已绑定的点击事件，可将元素对象的onclick属性设置为null。执行此操作后，再次点击按钮将不会弹出提示框。

第二种实现方式如下：


btn.addEventListener('click',function(){alert('hello world')},false);
btn.addEventListener('click',function(){alert(this.id)},false);

第三种实现方式如下：


function demo(){

　　alert('hello');
}
<button id="btn" onclick="demo()">click</button>

模拟触发按钮点击事件的方法

接下来介绍如何在JavaScript代码中模拟触发按钮的点击事件。

通过JS代码模拟触发按钮点击功能的具体实现如下：


<html> 
  <head> 
    <title>usually function</title> 
  </head> 
  <script> 
function load(){ 
  //下面两种方法效果是一样的 
  document.getElementById("target").onclick(); 
  document.getElementById("target").click(); 
} 
function test(){ 
  alert("test"); 
} 
</script> 
  <body onload="load()"> 
    <button id="target" onclick="test()">test</button> 
  </body> 
<html>

click()与onclick()的区别

需要注意以下关键区别：

调用btnObj.click()方法会真正以程序方式触发按钮的点击行为，从而激活该按钮绑定的onclick事件。

而直接调用btnObj.onclick()只是执行了onclick属性所指向的函数方法，这仅属于函数调用，并未真正触发事件机制。

作者最新文章

JavaScript将图片转换为Base64编码的两种途径

2026-11-05 16:43:05

怎么在 Vue 或 React 项目中正确集成 animate.js

2026-11-05 10:23:38

JS注册事件：addEventListener基础语法与参数详解

2026-11-05 08:44:56

JSP和JS的区别：运行环境与服务端/客户端职责解析

2026-11-04 23:34:36

pdf.js 官方下载地址：GitHub Release 获取预编译包

2026-11-04 23:07:27