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>