Vanilla JavaScript问题：点击div内按钮如何打印自身文本而非全部？

你代码里的问题很明确：document.querySelectorAll(".div")选中的是那个class为div的容器元素，而非里面的按钮。当你给这个div绑定点击事件后，点击按钮时事件会冒泡到div，此时this指向的是div容器，所以打印的自然是div内的全部文本。

方法1：直接选中所有按钮 #

把选择器改成.div button，精准选中div内的每个按钮，再逐个绑定点击事件：

const buttons = document.querySelectorAll(".div button");
buttons.forEach(button => {
    button.addEventListener('click', function (){
        console.log(this.textContent.trim()) // trim() 去除文本前后的空白字符
    })
});

方法2：事件委托（更高效） #

如果后续按钮可能动态添加，推荐用事件委托——只给父容器绑定一次事件，通过事件对象判断点击的目标是否为按钮：

const container = document.querySelector(".div");
container.addEventListener('click', function (e){
    if(e.target.tagName === 'BUTTON'){
        console.log(e.target.textContent.trim())
    }
})

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