js 关于获取标签绑定点击事件问题
发表时间：2020-10-19
发布人：葵宇科技
浏览次数：114
在原生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')
