JavaScript の module / export を使うときは onclick でなく addEventListener を使う

JavaScript の module / export を使うとき、要素の onclick は指定しないほうがいいかもしれない。

テンプレートリテラルで表示するものを export する場合を考える。

import { f } from './some.js'

export function display () {
    document.getElementById('a').innerHTML = `
    <button onclick="f()">Push</button>`
}

このとき onclick の f は動かない。

Uncaught ReferenceError: f is not defined at HTMLButtonElement.onclick

とエラーが出る。問題を解決するには

document.getElementById('#a button').addEventListener('click', f)

とする。document.getElementById はグローバルのスコープで addEventListener も適切に動く。