如何在Svelte中为编程式创建的元素绑定事件？

你直接通过innerHTML插入的<p on:mouseover={handleMouseOver}...>代码不会生效，因为Svelte的on:指令是编译时处理的语法糖——它会被转换成浏览器能识别的事件绑定逻辑，但浏览器本身不认识on:mouseover这种自定义属性，所以动态插入的元素无法触发绑定的事件。

推荐优先使用Svelte的声明式渲染方式，这更符合框架的设计范式；如果必须用原生DOM操作，也可以通过原生API绑定事件。

方法1：用Svelte声明式动态渲染（推荐） #

通过变量控制元素的显示/隐藏，让Svelte自动处理事件绑定：

<script>
    let colour = 'red';
    let showNewText = false;

    function refresh() {
        showNewText = true;
    }

    function handleMouseOver(e) {
        colour = 'green';
    }

    function handleMouseOut(e) {
        colour = 'red';
    }
</script>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill={colour}></circle>
</svg>
<div>
    <p on:mouseover={handleMouseOver} on:mouseout={handleMouseOut}>old text</p>
</div>
<button on:click={refresh}>Click</button>
<div id="new-text">
    {#if showNewText}
        <p on:mouseover={handleMouseOver} on:mouseout={handleMouseOut}>new text</p>
    {/if}
</div>

方法2：原生DOM操作绑定事件 #

如果必须手动创建DOM元素，使用原生addEventListener绑定事件：

<script>
    let colour = 'red';

    function refresh() {
        const container = document.getElementById('new-text');
        // 清空容器原有内容
        container.innerHTML = '';
        
        // 创建新元素并绑定事件
        const newP = document.createElement('p');
        newP.textContent = 'new text';
        newP.addEventListener('mouseover', handleMouseOver);
        newP.addEventListener('mouseout', handleMouseOut);
        
        container.appendChild(newP);
    }

    function handleMouseOver(e) {
        colour = 'green';
    }

    function handleMouseOut(e) {
        colour = 'red';
    }
</script>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill={colour}></circle>
</svg>
<div>
    <p on:mouseover={handleMouseOver} on:mouseout={handleMouseOut}>old text</p>
</div>
<button on:click={refresh}>Click</button>
<div id="new-text"></div>

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