异步箭头 function 的 onclick 语法是否仅适用于 Id？
[英]Does onclick Syntax for async arrow function work only with Id?
问题描述
This is part of my code.
这是我的代码的一部分。 I just wanted to know why document.getElementById("myName").onclick works and document.getElementByClassName("myClass").onclick does not work in the following onclick arrow function example? I just wanted to know why document.getElementById("myName").onclick works and document.getElementByClassName("myClass").onclick does not work in the following onclick arrow function example?
Does onclick arrow function take document selector as ID by default or support only Id? onclick箭头 function 默认将文档选择器作为 ID 还是仅支持 ID？
What if i want to implement onclick to class in this case?如果我想在这种情况下实现 onclick 到 class 怎么办？
//myName.onclick = async () => { //even this representation works document.getElementById("myName").onclick = async () => { try { //some code here which call some async function (not related so not writing here) alert('clicked.'); } catch(e) { log(e); } };
<html> <button id="myName" class="myClass"><strong>Click me</strong></button> </html>
3 个解决方案
解决方案1
3 2020-05-01 12:47:39
Method getElementsByClassName return array of elements, you need use index to get element and assign event to.方法getElementsByClassName返回元素array ，您需要使用索引来获取元素并将事件分配给。
document.getElementsByClassName("myClass")[0].onclick
If you use jquery, don't need get index only use如果你使用 jquery，不需要获取索引只使用
$(".myClass").click(() =>{
alert("ok");
});
//myName.onclick = async () => { //even this representation works document.getElementsByClassName("myClass")[0].onclick = async () => { try { //some code here which call some async function (not related so not writing here) alert('clicked.'); } catch(e) { log(e); } }; $(".myClass").click(() =>{ alert("ok"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <button id="myName" class="myClass"><strong>Click me</strong></button> </html>
解决方案2
1 2020-05-01 12:48:16
It's not working because document.getElementById() returns a single DOM node (to which you can attach an eventListener ), but document.getElementsByClassName() returns an array of DOM nodes (to which you can NOT attach an eventListener ).它不起作用，因为document.getElementById()返回单个 DOM 节点（您可以将eventListener附加到该节点），但document.getElementsByClassName()返回一个 DOM 节点array （您不能将eventListener附加到该节点）。
document.getElementsByClassName() is usually used for selecting multiple elements, hence the 's' in 'elements' in .getElementsByClassName() , which is missing in your question. document.getElementsByClassName()通常用于选择多个元素，因此.getElementsByClassName()中的“元素”中的“s”在您的问题中缺失。
You can either loop through the array or select the array index.您可以循环遍历数组或 select 数组索引。
解决方案3
0 2020-05-01 13:53:01
There are couple of questions in the post and these are the fitting answers for all of them.帖子中有几个问题，这些是所有问题的合适答案。
1) Does onclick Syntax for async arrow function work only with Id? 1) 异步箭头 function 的语法是否仅适用于 Id？ ANSWER: No答案：没有
2) Does onclick arrow function only support document selector as ID in this representation? 2) onclick 箭头 function 是否仅支持文档选择器作为此表示中的 ID？ myName.onclick = async () => { ANSWER: Yes. myName.onclick = async () => {答案：是的。
Example: if element has id as idName <button id="idName" class="className">示例：如果元素的 id 为 idName <button id="idName" class="className">
the representation can be like this idName.onclick = async () => {表示可以像这样idName.onclick = async () => {
and cannot be like this className.onclick = async () => {并且不能像这个className.onclick = async () => {
3) document.getElementsByClassName() returns an array of DOM nodes so we need to loop through the array or select the array index. 3) document.getElementsByClassName() 返回一个 DOM 节点数组，所以我们需要遍历数组或 select 数组索引。
4) The Exact representation using classname in Jquery is 4) Jquery 中使用类名的精确表示是
$(".myClass").click( async () => {
and in Javascript is在 Javascript 中是
document.getElementsByClassName("myClass")[0].onclick = async () => {
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.