瞭解目前DOM的HTML位置 (nodeName)

<input type="button" value="+" class="btn">

const btn = document.querySelector(".btn");
console.log(btn.nodeName);

取消默認 (preventDefault)

<a href="https://joe94113.github.io/page/3/">joe</a>

const a = document.querySelector("a");
a.addEventListener("click",function(e){
  e.preventDefault();
  console.log('123');
})

了解目前所在元素位置 (target)

<input type="button" class="btn" value="點擊">

const a = document.querySelector(".btn");
a.addEventListener("click",function(e){
  console.log(e.target);
})

e.target 搭配 nodeName 節點，抓到你預期要做的事情

const btn = document.querySelector(".btn");
btn.addEventListener("click",function(e){
    console.log(e.target);
})
const list = document.querySelector(".list");
list.addEventListener("click",function(e){
    console.log(e.target.nodeName);
    if(e.target.nodeName == "INPUT"){
        console.log('你點到按鈕了')
    }else{
        console.log('點哪裡')
    }
})