JavaScriptで後から追加されたり置き換わったりする要素に対してイベントをハンドリングする

後から追加されたり、途中で置き換わったりする要素に対してイベントハンドリングを行おうとした場合、下記のようにその要素に対してイベントハンドラを登録してしまうと、現在存在しない場合は当然エラーになりますし、要素自体が丸ごと置き換わってしまうような場合には、そのタイミングで登録していたものが意味のないものになってしまうため、うまくいきません。

こういった場合には、現在存在し、その後も置き換わることのない親の要素(たとえばdocument)に対してイベントハンドラを登録し、その中で、イベント発生元の要素をチェックして処理します。下記はdocumentに対して設定していますが、必要以上にハンドリングしない方が良いので、なるべく近い親に設定した方が良いかと思います。