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

时间:2020-10-20 作者:admin

在原生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个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。