js 关于获取标签绑定点击事件问题

最新推荐文章于 2024-05-19 21:53:49 发布

今晚早·睡

最新推荐文章于 2024-05-19 21:53:49 发布

阅读量6k

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44642057/article/details/109166862

版权

在原生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')

今晚早·睡

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
js 关于获取标签绑定点击事件问题

在原生js里，要绑定点击事件，首先要获取它的标签，获取标签的方法有很多，但不是每一种都可以绑定点击事件1.先来写一个div标签<body><div class="classA" id="idA">事件执行步骤</div></body>2.这里获取这个div标签的方法有：通过id获取：document.querySelector('IdA')通过class获取：document.getElementsByTagName('calssA'
复制链接

扫一扫