javascript - dom 节点上的自定义事件监听器

Question

我想从一个元素在 js 中调度一个自定义事件。是这样的:

var event = new CustomEvent("foo");
var elem = document.getElementById("bar");
elem.dispatchEvent(event);

但是我无法在 dom 节点上为新的自定义事件绑定(bind)监听器。对于标准事件来说，这很容易。只需添加一个属性 on<eventName>="some javascript"

<button onclick="console.log('click!')"></button>

自定义元素也可以吗？我试过on<elementName>和on-<elementName>但它不起作用。

<button onfoo="console.log('foo!')"></button>
<button on-foo="console.log('foo!')"></button>

Answer 1

您可以使用addEventListener方法注册自定义事件处理程序。顺便说一句，这种方法也推荐用于 native 事件。内联处理程序很糟糕，因为它们将 View (HTML) 与逻辑 (js) 混合在一起。

var elem = document.getElementById("bar");

elem.addEventListener('foo', function() {
  console.log('foo event on bar')
})

document.getElementById('foo').addEventListener('click', function() {
  var event = new CustomEvent('foo');
  elem.dispatchEvent(event);
})

<button id="bar">Bar</button>
<button id="foo">Trigger Foo</button>