HTML中能否不通过ID或类名获取触发函数的当前元素内容？

完全可以实现你需要的效果，不需要给元素绑定ID或类名，也不需要额外做元素定位就能拿到调用位置的元素内容。

方案1：自定义getThisElementContent()函数（完全匹配你的简化写法） #

直接在全局定义该函数即可，不需要在onclick中传任何参数，点击时会自动获取绑定事件元素的innerHTML：

function getThisElementContent() {
  // 顺着内联事件的调用链回溯，找到绑定onclick的元素
  let caller = arguments.callee.caller;
  while (caller) {
    const ctx = caller.this;
    if (ctx instanceof HTMLElement && ctx.onclick === caller) {
      return ctx.innerHTML.trim();
    }
    caller = caller.caller;
  }
  // 兜底兼容逻辑
  const evt = window.event;
  return evt?.currentTarget?.innerHTML?.trim() || evt?.srcElement?.innerHTML?.trim() || '';
}

使用时完全按照你期望的写法写即可：

<button class="colm" type="button" onclick="show(getThisElementContent())">1</button>

点击按钮后show方法接收到的参数就是按钮的内容1。

方案2：生产环境推荐写法（无兼容问题） #

如果不需要强行封装getThisElementContent函数，有更简单、全浏览器兼容、性能更好的写法——内联onclick上下文中的this直接指向当前绑定事件的元素，不需要任何定位逻辑，直接取值即可：

<button class="colm" type="button" onclick="show(this.innerHTML)">1</button>

这个写法不需要额外定义工具函数，也不会受严格模式限制，适配所有场景。

注意事项 #

• 方案1的调用栈回溯逻辑在JS严格模式下无法使用（严格模式禁用arguments.callee相关接口），如果你的项目开启了严格模式，直接用方案2即可。
• 如果按钮内部存在子元素，上述两种方案拿到的都是绑定事件的按钮本身的完整innerHTML，不会误取到子元素的内容。

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