欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

js 關(guān)于獲取標(biāo)簽綁定點(diǎn)擊事件問題 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 技術(shù)分享 >

js 關(guān)于獲取標(biāo)簽綁定點(diǎn)擊事件問題

發(fā)表時間：2020-10-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：125

在原生js里，要綁定點(diǎn)擊事件，首先要獲取它的標(biāo)簽，獲取標(biāo)簽的方法有很多，但不是每一種都可以綁定點(diǎn)擊事件

1.先來寫一個div標(biāo)簽

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

2.這里獲取這個div標(biāo)簽的方法有：

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

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

通過指定器直接獲取div標(biāo)簽：直接獲取標(biāo)簽的方法也有兩種

一個是直接獲取所有的div標(biāo)簽

document.querySelectorAll('div')

一個是獲取body里面的第一個div標(biāo)簽

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代碼綁定點(diǎn)擊事件

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

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

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

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

最后一個個的執(zhí)行字寫代碼發(fā)現(xiàn)

只有第二個和第四個的點(diǎn)擊事件被執(zhí)行了

原來：第一個獲取的是所有的div標(biāo)簽，并不是唯一的，即使這里只有一個div，直接綁定點(diǎn)擊事件還是不行的，雖然他不會報錯。

第二個獲取的是整個body中所有div的第一個div，是唯一的標(biāo)簽，可以直接綁定點(diǎn)擊事件。

第三個獲取的是整個body里面class為（classA）的標(biāo)簽，不是唯一的，所以也不能直接綁定點(diǎn)擊事件

第四個是通過id獲取標(biāo)簽，id的值在每一個body里面都不能重復(fù)的，所以可以直接綁定點(diǎn)擊事件

在最后總結(jié)，可以用指定器（querySelector），和id獲取標(biāo)簽綁定點(diǎn)擊事件，但指定器是第一個的，無法更加準(zhǔn)確的綁定點(diǎn)擊事件,所以通過id獲取標(biāo)簽綁定的點(diǎn)擊事件是最準(zhǔn)確的。

document.getElementById('idA')

document.querySelector('#idA')

相關(guān)案例查看更多