JavaScript中指定函数目标为元素时如何触发元素内嵌脚本

核心思路是利用浏览器原生自定义事件机制，让每个元素在加载阶段就自主注册专属的触发判断、执行逻辑，公共函数仅负责派发事件通知，完全不需要编写任何业务层面的判断逻辑，从根源上解决代码冗余问题，同时抛弃高风险的eval写法。

第一步：改造公共函数 #

公共myFunction只需要保留自身通用逻辑，额外加一行派发自定义事件的代码即可，不需要关心传入的元素有什么触发规则：

function myFunction(target){
    // 兼容传id字符串的调用方式
    if(typeof target === 'string') target = document.getElementById(target)
    if(!(target instanceof Element)) return // 非法入参直接返回

    // 此处写你原本要对target执行的通用逻辑
    console.log('公共函数通用逻辑执行，目标元素：', target.id)

    // 派发约定好的自定义事件，通知目标元素"你被传入myFunction了"
    target.dispatchEvent(new CustomEvent('myFunctionCalled', {
        bubbles: false, // 关闭冒泡避免父元素误触发
        detail: {} // 需要传给元素逻辑的参数统一放在这里
    }))
}

第二步：元素侧自注册监听逻辑 #

每个元素内嵌的脚本不需要存为字符串等待eval执行，页面解析到这段脚本时，直接给所属的父元素绑定自定义事件监听器即可，触发条件、执行逻辑完全由元素自身维护，和公共函数彻底解耦。
脚本中可以通过document.currentScript直接拿到当前script标签，再通过parentElement定位到所属的父元素，不需要硬编码元素id：

<div id="myParent">
    <script>
        const hostEl = document.currentScript.parentElement
        hostEl.addEventListener('myFunctionCalled', () => {
            alert("myParent was target of myFunction")
        })
    </script>
</div>

<div id="myElement_1">
    <p>true</p>
    <script>
        const hostEl = document.currentScript.parentElement
        hostEl.addEventListener('myFunctionCalled', () => {
            // 元素自身的判断逻辑自己维护，不用写到公共函数里
            const checkCondition = hostEl.querySelector('p').innerText
            if(checkCondition === "true"){
                alert("Hello")
            }
        })
    </script>
</div>

<div id="myElement_2">
    <p>False</p>
    <script>
        const hostEl = document.currentScript.parentElement
        hostEl.addEventListener('myFunctionCalled', () => {
            const checkCondition = hostEl.querySelector('p').innerText
            if(checkCondition === "true"){
                alert("World!")
            }
        })
    </script>
</div>

调用效果 #

直接按需求调用即可，执行结果完全符合预期：

myFunction("myParent") // 弹出提示：myParent was target of myFunction
myFunction("myElement_1") // 弹出提示：Hello
myFunction("myElement_2") // 无弹窗，元素自身判断条件不满足，不执行逻辑

方案优势 #

• 完全解耦：公共myFunction不需要感知任何元素的触发规则，后续新增任意数量的触发元素都无需修改公共函数代码，彻底避免逻辑堆积
• 无安全隐患：全程使用原生事件机制，不需要eval执行字符串脚本，没有脚本注入风险
• 扩展灵活：如果后续其他函数也需要触发元素逻辑，仅需在对应函数中派发同一个自定义事件即可；需要传参时直接放在CustomEvent的detail字段中，回调内可直接读取
• 维护成本低：逻辑模型和click、input等原生DOM事件完全一致，没有自定义的特殊规则，上手和调试都很简单

补充说明：如果你的元素是通过异步方式动态插入页面的，document.currentScript可能会返回null，这种场景下可以在插入元素时手动绑定监听，或者给元素加专属标记定位即可，常规静态页面渲染场景下上述写法可直接使用。

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