如何为通过<object>标签引用的外部SVG添加onclick事件？

问题背景 #

我需要为移动端实现点击SVG触发的下拉菜单，SVG存储在独立文件中，通过以下代码引入到页面：

<object type="image/svg+xml" data="./media/svg/moon.svg" id="moon"></object>

但发现onclick事件完全无法生效——因为<object>标签仅负责渲染外部文件，并不会替换自身。我尝试过直接给SVG标签注入onclick属性、插入script标签等方法，均未成功；虽然将SVG代码直接粘贴到主文件中能解决问题，但我希望保持index.html的整洁，继续使用外部SVG文件。

最终可行的JS代码 #

经过调试，以下是能实现需求的JavaScript代码：

function svgInject(objectId, layerId, attr, val, post) {
    svg = document.getElementById(objectId).contentDocument.getElementById(layerId);
    svg.setAttribute(attr, val)
    script = document.createElement("script");
    script.setAttribute('src', '/js/script.js');
    script.setAttribute('type', 'text/javascript');
    svg.append(script);
    if (post === true) {
        console.log(this.document.getElementById('moonMenu').contentDocument.getElementById('moon'));
    };
};
function menuCheck() {
    toggle = document.getElementById('toggle1');
    console.log(toggle)

    if (toggle.checked === true){toggle.checked = false} else {toggle.checked = true};
};
svgInject('moonMenu', 'moon', 'onclick', 'menuCheck()');

内容的提问来源于stack exchange，提问作者ECLYPSE