{"id":106534,"date":"2020-05-28T17:26:29","date_gmt":"2020-05-28T09:26:29","guid":{"rendered":"http:\/\/4563.org\/?p=106534"},"modified":"2020-05-28T17:26:29","modified_gmt":"2020-05-28T09:26:29","slug":"%e5%8f%af%e4%bb%a5%e5%9c%a8-for-%e5%be%aa%e7%8e%af%e9%87%8c%ef%bc%8c%e6%b7%bb%e5%8a%a0-btn-addeventlistenerclick-function-%e4%ba%8b%e4%bb%b6%e5%90%97%ef%bc%9f","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=106534","title":{"rendered":"\u53ef\u4ee5\u5728 for \u5faa\u73af\u91cc\uff0c\u6dfb\u52a0 btn.addEventListener(“click”, function(){…} \u4e8b\u4ef6\u5417\uff1f"},"content":{"rendered":"
\n
\n
\n

\u53ef\u4ee5\u5728 for \u5faa\u73af\u91cc\uff0c\u6dfb\u52a0 btn.addEventListener(“click”, function(){…} \u4e8b\u4ef6\u5417\uff1f <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : lisisi <\/span> <\/i> 0<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u53ef\u4ee5\u5728 for \u5faa\u73af\u91cc\uff0c\u4f7f\u7528 btn.addEventListener(“click”, function(){…} \u5417\uff1f<\/p>\n

<script type=\"text\/javascript\">     var btns = document.getElementsByTagName(\"button\");     for (var i = 0; i < btns.length; i++) {         btns[i].addEventListener(\"click\", function(){             \/\/ do something;         });     } <\/script> <\/code><\/pre>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (16<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : yuanfnadi <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u53ef\u4ee5\uff0c\u4e0d\u8fc7\u4e8b\u4ef6\u4f1a\u5192\u6ce1\uff0c\u5728\u7236\u5143\u7d20\u6355\u83b7\u7684\u8bdd\uff0c\u53ea\u9700\u8981\u4e00\u6b21\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Mutoo <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u53e6\u5916\u8fd8\u8981\u6ce8\u610f i \u7684\u5f15\u7528\u95ee\u9898\u3002\u5efa\u8bae\u4f7f\u7528 arrow function\uff0c\u5426\u5219 function \u5f15\u7528\u7684\u662f\u95ed\u5305\u5916\u7684 i\uff0c\u5f53 click \u4e8b\u4ef6\u89e6\u53d1\u65f6 i \u6c38\u8fdc\u662f btns.length                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Perry <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5efa\u8bae\u7528 1 \u7684\u65b9\u6cd5\u5728\u7236\u5143\u7d20\u6355\u83b7                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Yumwey <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u7528\u4e8b\u4ef6\u59d4\u6258                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : sybb <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u8fd9\u4f1a\u90fd\u7ed1\u5b9a\u5728\u6700\u540e\u4e00\u4e2a btn \u4e0a\u5427                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : TomatoYuyuko <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e8b\u4ef6\u59d4\u6258\u5c31\u662f\u5e72\u8fd9\u4e2a\u7684\uff0c\u4f60\u8fd9\u4e48\u5199\u592a\u7b28\u4e86                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : mengxzhou <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u7528\u4e8b\u4ef6\u59d4\u6258\u7ed1\u5b9a\u5728\u4e0a\u5c42\u8282\u70b9                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : shyangs <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 goog
    js \u4e8b\u4ef6\u4ee3\u7406 \u4e8b\u4ef6\u59d4\u6258                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Losses <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5355\u5c42\uff1a
    “`
    document.addEventListener(‘click’, (event) => {
     if (event.target.tagName !== ‘BUTTON’) return;
     \/\/ do something;
    })
    “`<\/p>\n
    \u5982\u679c\u662f\u591a\u5c42\u7684\u8bdd\uff1a
    “`
    document.addEventListener(“click”, event => {
     if (!event.target.closest(“button”)) return;
     console.log(“Doing something”);
    });
    “`<\/p>\n
    Demo:
    https:\/\/codesandbox.io\/s\/compassionate-williams-09ssq<\/p>\n
    \u53ea\u662f\u4e00\u4e2a\u601d\u8def\uff0c\u4f9b\u53c2\u8003                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : luogege <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u628a var \u6362\u4e2a let \u6bd4\u8f83\u597d                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : violetlai <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 target \u6765\u505a\u4f1a\u597d\u4e00\u4e9b                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Doracis <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e4b\u524d\u5728\u7f51\u4e0a\u770b\u5230\u5192\u6ce1\u6355\u83b7\u7684\u4f8b\u5b50\uff0c\u597d\u50cf\u5c31\u662f\u4f60\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u8bb0\u5f97\u662f\u53ef\u4ee5\u628a\u76d1\u542c\u7ed1\u5728\u7236\u5c42\u53bb\u8c03\u7528\uff0c\u5177\u4f53\u4ee3\u7801\u4f60\u641c\u5192\u6ce1\u6355\u83b7\u5173\u952e\u5b57\uff0c\u5728\u7b80\u4e66\u8fd8\u662f cnblog \u4e0a\u5c31\u6709\u7684                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Doracis <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @Doracis \u7528\u539f\u751f\u6709\u70b9\u522b\u624b\uff0c\u5982\u679c\u6709\u6846\u67b6\u7684\u8bdd\u5c31\u65b9\u4fbf\u591a\u4e86\uff0c\u53ef\u4ee5\u8bd5\u8bd5\u5440                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : CodingNaux <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u300a JavaScript \u9ad8\u7ea7\u7a0b\u5e8f\u8bbe\u8ba1\u300b\u6216\u8005\u300a javascript \u6743\u5a01\u6307\u5357\u300b\u4e24\u8005\u9009\u4e00\u672c\u770b\u770b                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : lvming6816077 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5982\u679c\u5728\u56de\u8c03\u91cc\u83b7\u53d6 i \u4f1a\u59cb\u7ec8\u662f\u4e00\u4e2a\u503c\uff0c\u53c2\u8003 JavaScript \u95ed\u5305                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : minglanyu <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e8b\u4ef6\u59d4\u6258                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u53ef\u4ee5\u5728 for \u5faa\u73af\u91cc\uff0c\u6dfb\u52a0 bt…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/106534"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=106534"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/106534\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=106534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=106534"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=106534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}