ブラウザ上の画像をクリックしたときに関数を実行したい

実現したいこと

• ブラウザ上の画像をクリックしたときに関数を実行したい。

発生している問題・エラーメッセージ

該当のソースコード

DOMの読み込みが終了した時点では、htmlその１の状態です。
この時に、file属性のinput要素でファイルを選択すると、htmlその２へ変化します。
そして、htmlその２のimg要素をクリックすると、htmlその１に変化します。

htmlその１

1<div id="File" style="height: 26px">2 <input id="File.file" type="file" name="file" />3 <input type="hidden" name="path" value="" />4</div>

htmlその２

1<div id="File" style="height: 26px">2 <input3 type="hidden"4 name="path"5 value="C:\test.txt"6 />7 <p style="margin: 0px; padding: 0px; vertical-align: baseline">8 test.txt (40K)<img9 src="https://{Server}/delete.png"10 title="Don't use this file"11 />12 </p>13</div>

試したこと

まず、htmlその１からhtmlその２に変化したことを検知する必要があるのかなと思い、observerを付けました。
これで、name属性が"path"のinput要素のvalue属性の変化を監視しようと思います。これは動作しました。

Javascript

1var path = ["Null"];2document.addEventListener("DOMContentLoaded", init);3 4function init() {5 const path_observer = new MutationObserver(6 (mutations) => { mutations.forEach((mutation) => { path.push(mutation.target.value) }) }7 );8 path_observer.observe(document.querySelector("[name=path]"), { attributes: true, attributeFilter: ["value"] });9};

これに似たように、”htmlその２のimg要素をクリック"を監視することができればなぁと思っています。
正確には、
title属性が"Don't use this file"のimg要素、ただし、同じ階層？にname属性がpathのinput要素があるもの、でしょうか。
addEventListenerを使おうと思いましたが、どのようにつければいいかわかりません。

ヒントを教えていただけないでしょうか？