如何在JavaScript函数中获取event.target的ID及控制函数执行逻辑

嘿，我来帮你搞定这两个JavaScript问题～

问题1：如何在JavaScript函数中获取event.target的ID？ #

要拿到event.target的ID，关键是让函数能接收到事件对象event，这里有两种常用的实现方式：

• HTML绑定事件时传入event
  在按钮的onclick属性里直接把event作为参数传给函数，示例代码如下：

  <button id="testBtn" onclick="getTargetId(event)">点击我</button>
  

  然后在JS函数中接收这个参数，通过event.target.id就能获取到目标元素的ID：

  function getTargetId(event) {
    const targetId = event.target.id;
    console.log('被点击元素的ID:', targetId); // 输出 testBtn
  }
  

• 用addEventListener绑定事件（更推荐）
  这种方式遵循HTML和JS分离的原则，回调函数的第一个参数默认就是事件对象：

  const btn = document.getElementById('testBtn');
  btn.addEventListener('click', function(event) {
    const targetId = event.target.id;
    console.log('被点击元素的ID:', targetId);
  });
  

  小提醒：event.target指的是实际被点击的元素，如果按钮内部嵌套了子元素（比如<button id="testBtn"><span>点我</span></button>），点击span时target会是span而非按钮本身。如果想获取绑定事件的元素，改用event.currentTarget.id即可。

问题2：如何阻止C按钮调用helloworld()时的alert弹窗 #

你的需求是点击C按钮时，执行worldhello()的同时，让helloworld()执行但不弹出alert，这里有两种实用方案：

方案1：给原函数加控制参数（优先推荐） #

修改helloworld函数，增加一个可选参数来控制是否显示alert，这样既不影响A按钮的正常调用，又能满足C按钮的需求：

function helloworld(showAlert = true){ 
  if(showAlert) { // 只有当参数为true时才弹出alert
    alert("helloworld"); 
  }
}
function worldhello(){ alert("worldhello"); }

然后给C按钮绑定这样的点击逻辑：

<button onclick="helloworld(false); worldhello();">C按钮</button>

点击C按钮时，helloworld会执行但跳过alert，同时worldhello正常弹出弹窗。

方案2：不修改原函数，用包装函数拦截 #

如果不能修改原helloworld函数，可以写一个包装函数，临时替换全局的alert方法，执行完helloworld后再恢复：

function wrappedHelloworld() {
  // 先保存原alert方法，避免影响其他功能
  const originalAlert = window.alert;
  // 临时把alert替换成空函数，这样调用helloworld时不会弹窗
  window.alert = function() {};
  // 调用原helloworld函数
  helloworld();
  // 恢复原alert方法
  window.alert = originalAlert;
}

然后C按钮的点击逻辑改成：

<button onclick="wrappedHelloworld(); worldhello();">C按钮</button>

注意：如果helloworld里包含异步操作，这种同步替换的方式可能失效，所以优先选方案1。

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