js 關于(yú)獲取标簽綁定點擊事件問題
發表時(shí)間：2020-10-19
發布人(rén)：融晨科技
浏覽次數：125
在(zài)原生js裏，要(yào / yāo)綁定點擊事件，首先要(yào / yāo)獲取它的(de)标簽，獲取标簽的(de)方法有很多，但不(bù)是(shì)每一種都可以(yǐ)綁定點擊事件
1.先來(lái)寫一個(gè)div标簽
<body>
<div class="classA" id="idA">事件執行步驟</div>
</body>2.這(zhè)裏獲取這(zhè)個(gè)div标簽的(de)方法有：
通過id獲取：document.getElementById('idA')
通過class獲取：document.getElementsByClassName('classA')
通過指定器直接獲取div标簽：直接獲取标簽的(de)方法也(yě)有兩種
一個(gè)是(shì)直接獲取所有的(de)div标簽
document.querySelectorAll('div')一個(gè)是(shì)獲取body裏面的(de)第一個(gè)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事件被執行')
}最後一個(gè)個(gè)的(de)執行字寫代碼發現
隻有第二個(gè)和(hé / huò)第四個(gè)的(de)點擊事件被執行了(le／liǎo)
原來(lái)：第一個(gè)獲取的(de)是(shì)所有的(de)div标簽，并不(bù)是(shì)唯一的(de)，即使這(zhè)裏隻有一個(gè)div，直接綁定點擊事件還是(shì)不(bù)行的(de)，雖然他(tā)不(bù)會報錯。
第二個(gè)獲取的(de)是(shì)整個(gè)body中所有div的(de)第一個(gè)div，是(shì)唯一的(de)标簽，可以(yǐ)直接綁定點擊事件。
第三個(gè)獲取的(de)是(shì)整個(gè)body裏面class爲(wéi / wèi)（classA）的(de)标簽，不(bù)是(shì)唯一的(de)，所以(yǐ)也(yě)不(bù)能直接綁定點擊事件
第四個(gè)是(shì)通過id獲取标簽，id的(de)值在(zài)每一個(gè)body裏面都不(bù)能重複的(de)，所以(yǐ)可以(yǐ)直接綁定點擊事件
在(zài)最後總結，可以(yǐ)用指定器（querySelector），和(hé / huò)id獲取标簽綁定點擊事件，但指定器是(shì)第一個(gè)的(de)，無法更加準确的(de)綁定點擊事件,所以(yǐ)通過id獲取标簽綁定的(de)點擊事件是(shì)最準确的(de)。
document.getElementById('idA')
document.querySelector('#idA')
