JavaScript中动态触发元素特定逻辑：告别内联脚本与eval()的陷阱

<div id="myParent">
    <script>
       // 这段代码会在页面加载时执行一次，然后就完成了它的使命。
       // 它不会“监听” myFunction(myParent) 的调用。
       console.log("This script runs on page load.");
    </script>
</div>

<div id="myElement_1" data-action="showAlert">
    <p>这是一个需要弹窗的元素</p>
</div>

<div id="myElement_2" data-action="logToConsole">
    <p>这是一个需要打印日志的元素</p>
</div>

<div id="myElement_3" data-action="customBehavior">
    <p>这是一个需要执行复杂自定义行为的元素</p>
</div>

// 1. 定义一个行为映射对象，将行为名称与对应的函数关联起来
const elementBehaviors = {
    showAlert: (element) => {
        alert(`触发了元素: ${element.id} 的弹窗行为！`);
        // 可以根据元素内部内容进一步定制消息
        const pContent = element.querySelector('p')?.innerText || '无内容';
        console.log(`弹窗内容：${pContent}`);
    },
    logToConsole: (element) => {
        console.log(`触发了元素: ${element.id} 的日志行为。`);
        const pContent = element.querySelector('p')?.innerText || '无内容';
        console.log(`元素内容：${pContent}`);
    },
    customBehavior: (element) => {
        console.log(`执行了元素: ${element.id} 的复杂自定义行为。`);
        // 这里可以包含更复杂的逻辑，例如修改DOM、发起网络请求等
        element.style.backgroundColor = '#f0f8ff'; // 示例：改变背景色
    }
};

// 2. 定义处理函数，根据data-action属性执行相应行为
function processElement(targetElement) {
    // 使用 dataset API 获取 data-* 属性的值
    const actionType = targetElement.dataset.action;

    if (actionType && typeof elementBehaviors[actionType] === 'function') {
        // 如果存在对应的行为函数，则调用它，并将目标元素作为参数传入
        elementBehaviors[actionType](targetElement);
    } else {
        console.warn(`元素 ${targetElement.id} 未定义或不支持行为类型: ${actionType}`);
    }
}

// 3. 示例调用
document.addEventListener('DOMContentLoaded', () => {
    const element1 = document.getElementById('myElement_1');
    const element2 = document.getElementById('myElement_2');
    const element3 = document.getElementById('myElement_3');

    if (element1) processElement(element1); // 触发弹窗
    if (element2) processElement(element2); // 触发日志
    if (element3) processElement(element3); // 触发自定义行为

    // 假设有一个元素没有定义data-action
    const element4 = document.createElement('div');
    element4.id = 'myElement_4';
    document.body.appendChild(element4);
    processElement(element4); // 将会打印警告
});

<div id="myParentDiv">
    <p>这是一个将派发自定义事件的父元素。</p>
</div>

// 1. 在页面加载完成后，为需要响应的元素添加事件监听器
document.addEventListener('DOMContentLoaded', () => {
    const myParentDiv = document.getElementById('myParentDiv');

    if (myParentDiv) {
        myParentDiv.addEventListener('elementProcessed', (event) => {
            console.log(`捕获到 'elementProcessed' 事件在元素: ${event.target.id}`);
            // event.detail 可以包含从派发者传递过来的额外数据
            console.log('事件详情:', event.detail);

            // 根据事件详情执行特定逻辑
            if (event.detail.action === 'showAlert') {
                alert(`事件触发弹窗：${event.detail.message}`);
            } else if (event.detail.action === 'log') {
                console.log(`事件触发日志：${event.detail.message}`);
            }
        });
    }
});

// 2. 定义处理函数，在其中派发自定义事件
function myFunction(targetElement, actionType, message) {
    // ... 在这里可以执行 myFunction 自身的核心逻辑 ...
    console.log(`myFunction 正在处理元素: ${targetElement.id}`);

    // 创建一个自定义事件
    const event = new CustomEvent('elementProcessed', {
        detail: { // detail 属性用于传递自定义数据
            action: actionType,
            message: message || `元素 ${targetElement.id} 已被处理。`
        },
        bubbles: true, // 允许事件冒泡
        cancelable: true // 允许事件被取消
    });

    // 在目标元素上派发事件
    targetElement.dispatchEvent(event);
}

// 3. 示例调用
document.addEventListener('DOMContentLoaded', () => {
    const parentDiv = document.getElementById('myParentDiv');
    if (parentDiv) {
        myFunction(parentDiv, 'showAlert', '这是一个来自 myFunction 的弹窗消息！');
        // 稍后可以再次调用，传递不同的行为和消息
        setTimeout(() => {
            myFunction(parentDiv, 'log', '这是第二次处理，只记录日志。');
        }, 1000);
    }
});