JavaScript隐式事件与显式事件的区别及带参点击函数事件处理问题

让我分两部分来解答你的问题：

简单来说，两者核心区别在于是否由开发者主动绑定/触发：

• 显式事件：完全由开发者主动声明绑定的事件，是你明确告诉浏览器「当某个动作发生时，执行指定逻辑」。比如你代码里的<a onclick="myFunction('test')">、用addEventListener绑定的点击事件，或者直接给DOM元素赋值element.onclick = function(){...}，这些都属于显式事件。
• 隐式事件：由浏览器自动触发、无需开发者手动绑定的事件行为。比如页面加载完成时的DOMContentLoaded、元素默认的焦点切换事件focus/blur，还有表单提交时的默认跳转行为——这些都是浏览器内置的、隐式运行的事件流程。另外有时候大家会把「事件函数中隐式获取的event对象」也算作隐式相关，但更准确的定义还是浏览器主动发起的非开发者绑定事件。

你觉得传了自定义参数就没法传event？其实有几种简单的处理方式：

方法1：调用时直接传入event参数（最直接） #

你可以在onclick属性里同时传递event和自定义参数，浏览器会自动识别全局的event对象并传入：

<a href="javascript:void(0)" onclick="myFunction(event, 'test')">Click me</a>
<p id="demo"></p>

对应的函数修改为：

function myFunction(event, text) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = text; // 注意这里要去掉引号，用变量text而非字符串"text"
  window.open("https://www.amazon.com", '_blank') // 记得加https协议，否则会被当成相对路径
}

方法2：利用全局window.event（不推荐，但兼容旧环境） #

浏览器触发事件时，会把当前事件对象挂载到window.event上，你可以直接在函数里获取：

function myFunction(text) {
  const event = window.event;
  event.preventDefault();
  document.getElementById("demo").innerHTML = text;
  window.open("https://www.amazon.com", '_blank')
}

不过这种方法依赖全局对象，在严格模式、事件委托或异步场景下容易出问题，不推荐作为长期方案。

方法3：改用addEventListener绑定（现代JS推荐实践） #

把事件绑定从HTML标签中分离出来，用JS代码绑定，既符合「关注点分离」的原则，也能自然获取事件对象：

<a href="#" id="myLink">Click me</a>
<p id="demo"></p>

// 定义你的自定义参数
const myText = 'test';

// 获取元素并绑定事件
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = myText;
  window.open("https://www.amazon.com", '_blank')
});

这种方式下，事件对象会自动作为回调函数的第一个参数传入，自定义参数可以通过闭包轻松获取，代码维护起来也更清晰。

另外帮你纠正两个代码小问题：

1. 原代码中innerHTML = "text"会插入字符串"text"，而非你传入的参数，要去掉引号用变量text；
2. window.open("www.amazon.com")需要加上https://，否则浏览器会将其视为当前页面的相对路径，无法正确打开亚马逊官网。

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