Event handling with formatters

[aonghas]

Hi there, Another question more than an issue: Is there any built-in way to handle events with the formatters? For example, if I wanted to click a chord in the output to change it in the model and update, my current thinking is I'd have to code my own formatter and attach events to the DOM myself rather than use one of the inbuilt formatters (HtmlDivFormatter/HtmlTableFormatter)?

[martijnversluis]

Hey @aonghas!

I would say it depends on how you're planning to attach the event handlers.

If you use some library that binds events based on data- attributes, you should probably create a custom formatter based on an inbuilt formatter. If you bind events based on selectors, I'd think that should be possible using the built-in formatters. For example:

function chordClicked(event) {
  // Do something
}

Array.from(document.querySelectorAll('.chord-sheet .chord')).addEventListener('click', chordClicked);

Does this somewhat answer your question?