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>