父HTML元素绑定点击事件监听器后如何获取被点击子article的value值

核心问题1：自定义属性读取方式错误 #

value是<input>、<button>这类表单元素专属的原生DOM属性，<article>作为普通容器元素没有自带的value属性，你在HTML中写的value="1"属于自定义属性，无法直接通过.value语法读取。

规范的自定义属性写法是使用HTML标准的data-*格式，读取时通过dataset属性获取，不会出现兼容性问题。

核心问题2：DOM插入方法调用错误 #

insertAdjacentElement方法要求传入的第二个参数是真实DOM节点，你传入的是HTML字符串，会触发类型错误，需要替换为接收字符串参数的insertAdjacentHTML方法。

修改后的代码 #

HTML部分（调整自定义属性写法）

<div id="displayById"></div>
<section id="timeline" class ="grid">
<!--  entries cards for  testing layout  -->
<article data-value="1">
    <p class="entryDate">20.09.2021</p>
    <h3 class="entryTitle">Entry 1 Title</h3> 
    <img  class="entryImg" src="https://picsum.photos/100" alt="">
    <div class="entryDescription">Lorem ipsum lorem ipsum</div>
</article>
<article data-value="2">
    <h3 class="entryTitle">Entry 2 Title</h3>
    <img  class="entryImg" src="https://picsum.photos/100" alt="">
    <div class="entryDescription">Lorem ipsum lorem ipsum</div>
</article>    
</section>

JS部分（调整属性读取和DOM插入逻辑）

const selectEntry = document.getElementById('timeline')
selectEntry.addEventListener('click', entryById)

function entryById(e) {
    // 点击区域不在article内部时直接终止逻辑，避免报错
    const targetArticle = e.target.closest('article')
    if (!targetArticle) return

    try {
        e.preventDefault()
        // 读取标准data-*自定义属性
        let id = targetArticle.dataset.value
        console.log(id)
        document.getElementById('timeline').style.display="none"
        fetch(`http://localhost:3000/entry/${id}`)
        .then( r => r.json())
        .then( data => {
            console.log(data)
            let entry = `<article class="card" data-value="${id}">
            <h3 class="entryTitle">${data.title}</h3>
            <img  class="entryImg" src="" alt="">
            <div class="entryDescription">${data.description}</div>
        </article>`
        // 替换为支持HTML字符串的插入方法
        document.getElementById('displayById').insertAdjacentHTML('beforeend', entry)
        })
    }
    catch (error) {
        console.log(error);
    }
}

你目前用的事件委托思路是更优的实现，比给每个<article>单独绑定监听性能更好，后续如果动态新增日志条目也不需要重新绑定事件，不需要调整为逐个绑定的方案。

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