javascript - 如果为元素或父级设置了 onClick 事件，则查找

Question

我想更改 HTML+JS 模板的行为，但我不想重新做已经完成的事情。假设我们有一个元素层次结构，看起来内部元素正在调用它的 onclick 事件的函数。但是当我在 chrome 检查器控制台上选择它并检查它是否有 onclick 时它返回 null 我认为它是以更通用的方式或可能在其他属性上开发的？

我想要的是找到那个函数把它包装在我的里面，然后在做其他事情之后调用它。

层次结构如下:

<ul> <li data-id="1234"> <div> <a href="#">the button</a> </div> </li> ... </ul>

每当按下按钮时，data-id就会通过ajax发送到服务器。

Answer 1

我用 es6 玩了一下，得到了预期的结果:https://codepen.io/omgitsevan/pen/yxrVVM

但基本上，代码如下:

Javascript

document.addEventListener('click', (evt) => {
  function getDataAttr(node, attrValue) {
    if (!node.getAttribute(attrValue)) {
      return getDataAttr(node.parentNode, attrValue)
    }

    console.log(node.getAttribute(attrValue))
  }

  getDataAttr(evt.target, 'data-id');
})

HTML

<ul>
  <li data-id="1234">
    <div> <a href="#">the button</a> </div>
  </li> ... </ul>