dom 节点上的自定义事件侦听器

Question

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

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

但是我无法为 dom 节点上的新自定义事件绑定侦听器。使用标准事件很容易。只需添加一个属性 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 方法注册自定义事件处理程序。顺便说一句，这种方法也推荐用于本地事件。内联处理程序很糟糕，因为它们将视图 (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>

Answer 2

始终使用 addEventListener 而不是内联事件侦听器！

如果允许您这样做：

const button = document.querySelector('button');

button.addEventListener('foo', function () {
  console.log('foo!');
});

const event = new Event('foo');
button.dispatchEvent(event);

<button>Click</button>

dom 节点上的自定义事件侦听器

custom event listener on a dom node

html

javascript

custom-events