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节点上的自定义事件侦听器

2 个答案: