js 關於獲取標籤繫結點選事件問題

在原生js裡，要繫結點選事件，首先要獲取它的標籤，獲取標籤的方法有很多，但不是每一種都可以繫結點選事件

1.先來寫一個div標籤

<body>
<div class="classA" id="idA">事件執行步驟</div>
</body>

2.這裡獲取這個div標籤的方法有：

通過id獲取：document.getElementById('idA')

通過class獲取：document.getElementsByClassName('classA')

通過指定器直接獲取div標籤：直接獲取標籤的方法也有兩種

一個是直接獲取所有的div標籤

document.querySelectorAll('div')

一個是獲取body裡面的第一個div標籤

document.querySelector('div')

document.querySelector('div')

    const handelQSA = document.querySelectorAll('div')

    const handelQS = document.querySelector('div')

    const handelClass = document.getElementsByClassName('calssA')

    const handelId = document.getElementById('idA')

3.通過js程式碼繫結點選事件

    handelQS.onclick = function () {
        console.log('handelQSA事件被執行')
    }

    handelQS.onclick = function () {
        console.log('handelQS事件被執行')
    }

    handelClass.onclick = function () {
        console.log('handelClass事件被執行')
    }

    handelId.onclick = function () {
        console.log('handelId事件被執行')
    }

最後一個個的執行字寫程式碼發現

只有第二個和第四個的點選事件被執行了

原來：第一個獲取的是所有的div標籤，並不是唯一的，即使這裡只有一個div，直接繫結點選事件還是不行的，雖然他不會報錯。

第二個獲取的是整個body中所有div的第一個div，是唯一的標籤，可以直接繫結點選事件。

第三個獲取的是整個body裡面class為（classA）的標籤，不是唯一的，所以也不能直接繫結點選事件

第四個是通過id獲取標籤，id的值在每一個body裡面都不能重複的，所以可以直接繫結點選事件

在最後總結，可以用指定器（querySelector），和id獲取標籤繫結點選事件，但指定器是第一個的，無法更加準確的繫結點選事件,所以通過id獲取標籤繫結的點選事件是最準確的。

document.getElementById('idA')

document.querySelector('#idA')