{"id":422,"date":"2024-10-25T11:26:05","date_gmt":"2024-10-25T03:26:05","guid":{"rendered":"https:\/\/eve2333.top\/?p=422"},"modified":"2024-10-25T11:26:05","modified_gmt":"2024-10-25T03:26:05","slug":"javascript-api%e5%ad%a6%e4%b9%a0-part-3","status":"publish","type":"post","link":"https:\/\/eve2333.top\/?p=422","title":{"rendered":"Javascript api\u5b66\u4e60 part-3"},"content":{"rendered":"\n

\u73af\u5883\u5bf9\u8c61<\/h1>\n\n\n\n

\u73af\u5883\u5bf9\u8c61\uff1a \u6307\u7684\u662f\u51fd\u6570\u5185\u90e8\u7279\u6b8a\u7684 \u53d8\u91cf this \uff0c \u5b83\u4ee3\u8868\u7740\u5f53\u524d\u51fd\u6570\u8fd0\u884c\u65f6\u6240\u5904\u7684\u73af\u5883
\u4f5c\u7528\uff1a \u5f04\u6e05\u695athis\u7684\u6307\u5411\uff0c\u53ef\u4ee5\u8ba9\u6211\u4eec\u4ee3\u7801\u66f4\u7b80\u6d01
\u51fd\u6570\u7684\u8c03\u7528\u65b9\u5f0f\u4e0d\u540c\uff0cthis \u6307\u4ee3\u7684\u5bf9\u8c61\u4e5f\u4e0d\u540c
\u3010\u8c01\u8c03\u7528\uff0c this \u5c31\u662f\u8c01\u3011 \u662f\u5224\u65ad this \u6307\u5411\u7684\u7c97\u7565\u89c4\u5219
\u76f4\u63a5\u8c03\u7528\u51fd\u6570\uff0c\u5176\u5b9e\u76f8\u5f53\u4e8e\u662f window.\u51fd\u6570\uff0c\u6240\u4ee5 this \u6307\u4ee3 window <\/p>\n\n\n\n

\u56de\u8c03\u51fd\u6570<\/h1>\n\n\n\n

\u5982\u679c\u5c06\u51fd\u6570 A \u505a\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9\u51fd\u6570 B \u65f6\uff0c\u6211\u4eec\u79f0\u51fd\u6570 A \u4e3a \u56de\u8c03\u51fd\u6570
\u7b80\u5355\u7406\u89e3\uff1a \u5f53\u4e00\u4e2a\u51fd\u6570\u5f53\u505a\u53c2\u6570\u6765\u4f20\u9012\u7ed9\u53e6\u5916\u4e00\u4e2a\u51fd\u6570\u7684\u65f6\u5019\uff0c\u8fd9\u4e2a\u51fd\u6570\u5c31\u662f \u56de\u8c03\u51fd\u6570
\u5e38\u89c1\u7684\u4f7f\u7528\u573a\u666f\uff1a\u5b9a\u65f6\u5668\u662f\u56de\u8c03\u51fd\u6570<\/p>\n\n\n\n

 \u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u53e6\u4e00\u4e2a\u51fd\u6570\u7684\u53c2\u6570\u3002\u5f53\u4f5c\u53c2\u6570\u7684\u90a3\u4e2a\u51fd\u6570\uff0c\u5c31\u662f\u56de\u8c03\u51fd\u6570\uff0c\u4f60\u8c03\u7528\u7cfb\u7edf\u7684\u51fd\u6570\uff0c\u662f\u76f4\u8c03\u3002\u8ba9\u7cfb\u7edf\u8c03\u7528\u4f60\u7684\u51fd\u6570\uff0c\u5c31\u662f\u56de\u8c03
 <\/p>\n\n\n\n

\u9875\u9876tab\u680f\u5207\u6362<\/h1>\n\n\n\n

\u611f\u5174\u8da3\u7684\u53ef\u4ee5\u4e86\u89e3\u4e00\u4e0bforEach\u51fd\u6570\uff0c\u904d\u5386\u6570\u7ec4\u5185\u5bb9\u90e8\u5206\u53ea\u9700\u4e00\u4e2adiv\uff0c\u4e0d\u7528\u9690\u85cf\u4e5f\u53ef\u4ee5\u5b9e\u73b0\uff0c\u4eb2\u6d4b\u6709\u6548\u3002<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n \n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>tab\u680f\u5207\u6362<\/title>\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n    }\n \n    .tab {\n      width: 590px;\n      height: 340px;\n      margin: 20px;\n      border: 1px solid #e4e4e4;\n    }\n \n    .tab-nav {\n      width: 100%;\n      height: 60px;\n      line-height: 60px;\n      display: flex;\n      justify-content: space-between;\n    }\n \n    .tab-nav h3 {\n      font-size: 24px;\n      font-weight: normal;\n      margin-left: 20px;\n    }\n \n    .tab-nav ul {\n      list-style: none;\n      display: flex;\n      justify-content: flex-end;\n    }\n \n    .tab-nav ul li {\n      margin: 0 20px;\n      font-size: 14px;\n    }\n \n    .tab-nav ul li a {\n      text-decoration: none;\n      border-bottom: 2px solid transparent;\n      color: #333;\n    }\n \n    .tab-nav ul li a.active {\n      border-color: #e1251b;\n      color: #e1251b;\n    }\n \n    .tab-content {\n      padding: 0 16px;\n    }\n \n    .tab-content .item {\n      display: none;\n    }\n \n    .tab-content .item.active {\n      display: block;\n    }\n  <\/style>\n<\/head>\n \n<body>\n  <div class=\"tab\">\n    <div class=\"tab-nav\">\n      <h3>\u6bcf\u65e5\u7279\u4ef7<\/h3>\n      <ul>\n        <li><a class=\"active\" href=\"javascript:;\">\u7cbe\u9009<\/a><\/li>\n        <li><a href=\"javascript:;\">\u7f8e\u98df<\/a><\/li>\n        <li><a href=\"javascript:;\">\u767e\u8d27<\/a><\/li>\n        <li><a href=\"javascript:;\">\u4e2a\u62a4<\/a><\/li>\n        <li><a href=\"javascript:;\">\u9884\u544a<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"tab-content\">\n      <div class=\"item active\"><img src=\".\/images\/tab00.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab01.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab02.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab03.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab04.png\" alt=\"\" \/><\/div>\n    <\/div>\n  <\/div>\n  <script>\n    \/\/ 1. a \u6a21\u5757\u5236\u4f5c \u8981\u7ed9 5\u4e2a\u94fe\u63a5\u7ed1\u5b9a\u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\n    \/\/ 1.1 \u83b7\u53d6 a \u5143\u7d20 \n    const as = document.querySelectorAll('.tab-nav a')\n    for (let i = 0; i < as.length; i++) {\n      \/\/ \u8981\u7ed9 5\u4e2a\u94fe\u63a5\u7ed1\u5b9a\u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\n      as[i].addEventListener('mouseenter', function () {  \/\/ \u9f20\u6807\u7ecf\u8fc7\n        \/\/ \u6392\u4ed6\u601d\u60f3  \n        \/\/ \u5e72\u6389\u522b\u4eba \u79fb\u9664\u7c7bactive\n        document.querySelector('.tab-nav .active').classList.remove('active')\n        \/\/ \u6211\u767b\u57fa \u6211\u6dfb\u52a0\u7c7b active  this \u5f53\u524d\u7684\u90a3\u4e2a a \n        this.classList.add('active')\n \n        \/\/ \u4e0b\u97625\u4e2a\u5927\u76d2\u5b50 \u4e00\u4e00\u5bf9\u5e94  .item \n        \/\/ \u5e72\u6389\u522b\u4eba\n        document.querySelector('.tab-content .active').classList.remove('active')\n        \/\/ \u5bf9\u5e94\u5e8f\u53f7\u7684\u90a3\u4e2a item \u663e\u793a \u6dfb\u52a0 active \u7c7b\n        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')\n         \/\/\u8fd9\u91cc\u4e0d\u7528this\u662f\u56e0\u4e3athis\u6307\u5411\u7684\u662fas[i]\uff0cas\u53ea\u9009\u62e9\u4e86li\u6807\u7b7e\uff0c\n        \/\/\u4f46\u662f\u4e0b\u9762\u7684\u5185\u5bb9\u90e8\u5206\u4e0d\u662fli\u6807\u7b7e\uff0c\u6240\u4ee5\u4e0d\u80fd\u7528this\u4e86\uff0c\u9700\u8981\u53e6\u5916\u58f0\u660e\n      \/\/\u8be6\u7ec6\u89e3\u91ca\u4e0b\uff1a\u4e0a\u4e00\u4e2a\u51fd\u6570\u4f53\u4e2d\u4f60\u628a\u51fd\u6570\u5f53\u505a\u53c2\u6570\u7ed9\u4e86addEven..\u4f7f\u7528\uff0cthis\u6307\u5411\u7684\u5c31\u662fas[i]\uff0c\u800c\u4e0b\u9762\u8fd9\u4e2a\u663e\u793a\u7684\u5185\u5bb9\u662f\u6839\u636e\u4f60\u6240\u70b9\u51fb\u7684\u9009\u9879\u663e\u793a\u7684\u5e76\u4e0d\u9700\u8981\u81ea\u5df1\u53bb\u64cd\u4f5c\u4e5f\u5c31\u6ca1\u6cd5\u4f7f\u7528this(\u4e2a\u4eba\u89c1\u89e3)\n        })\n    }\n  <\/script>\n<\/body>\n \n<\/html><\/code><\/pre>\n\n\n\n
 \u5168\u9009\u6587\u672c\u6846\u6848\u4f8b<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n  <meta charset=\"UTF-8\">\n  <title><\/title>\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n    }\n \n    table {\n      border-collapse: collapse;\n      border-spacing: 0;\n      border: 1px solid #c0c0c0;\n      width: 500px;\n      margin: 100px auto;\n      text-align: center;\n    }\n \n    th {\n      background-color: #09c;\n      font: bold 16px \"\u5fae\u8f6f\u96c5\u9ed1\";\n      color: #fff;\n      height: 24px;\n    }\n    td {\n      border: 1px solid #d0d0d0;\n      color: #404060;\n      padding: 10px;\n    }\n \n    .allCheck {\n      width: 80px;\n    }\n  <\/style>\n<\/head>\n \n<body>\n  <table>\n    <tr>\n      <th class=\"allCheck\">\n        <input type=\"checkbox\" name=\"\" id=\"checkAll\"> <span class=\"all\">\u5168\u9009<\/span>\n      <\/th>\n      <th>\u5546\u54c1<\/th>\n      <th>\u5546\u5bb6<\/th>\n      <th>\u4ef7\u683c<\/th>\n    <\/tr>\n    <tr>\n      <td>\n        <input type=\"checkbox\" name=\"check\" class=\"ck\">\n      <\/td>\n      <td>\u5c0f\u7c73\u624b\u673a<\/td>\n      <td>\u5c0f\u7c73<\/td>\n      <td>\uffe51999<\/td>\n    <\/tr>\n    <tr>\n      <td>\n        <input type=\"checkbox\" name=\"check\" class=\"ck\">\n      <\/td>\n      <td>\u5c0f\u7c73\u51c0\u6c34\u5668<\/td>\n      <td>\u5c0f\u7c73<\/td>\n      <td>\uffe54999<\/td>\n    <\/tr>\n    <tr>\n      <td>\n        <input type=\"checkbox\" name=\"check\" class=\"ck\">\n      <\/td>\n      <td>\u5c0f\u7c73\u7535\u89c6<\/td>\n      <td>\u5c0f\u7c73<\/td>\n      <td>\uffe55999<\/td>\n    <\/tr>\n  <\/table>\n  <script>\n    \/\/ 1. \u83b7\u53d6\u5927\u590d\u9009\u6846\n    const checkAll = document.querySelector('#checkAll')\n    \/\/ 2. \u83b7\u53d6\u6240\u6709\u7684\u5c0f\u590d\u9009\u6846\n    const cks = document.querySelectorAll('.ck')\n    \/\/ 3. \u70b9\u51fb\u5927\u590d\u9009\u6846  \u6ce8\u518c\u4e8b\u4ef6\n    checkAll.addEventListener('click', function () {\n      \/\/ \u5f97\u5230\u5f53\u524d\u5927\u590d\u9009\u6846\u7684\u9009\u4e2d\u72b6\u6001\n      \/\/ console.log(checkAll.checked)  \/\/ \u5f97\u5230 \u662f true \u6216\u8005\u662f false\n      \/\/ 4. \u904d\u5386\u6240\u6709\u7684\u5c0f\u590d\u9009\u6846 \u8ba9\u5c0f\u590d\u9009\u6846\u7684checked  =  \u5927\u590d\u9009\u6846\u7684 checked\n      for (let i = 0; i < cks.length; i++) {\n        cks[i].checked = this.checked\n      }\n    })\n    \/\/ 5. \u5c0f\u590d\u9009\u6846\u63a7\u5236\u5927\u590d\u9009\u6846\n    for (let i = 0; i < cks.length; i++) {\n      \/\/ 5.1 \u7ed9\u6240\u6709\u7684\u5c0f\u590d\u9009\u6846\u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\n      cks[i].addEventListener('click', function () {\n        \/\/ \u5224\u65ad\u9009\u4e2d\u7684\u5c0f\u590d\u9009\u6846\u4e2a\u6570 \u662f\u4e0d\u662f\u7b49\u4e8e  \u603b\u7684\u5c0f\u590d\u9009\u6846\u4e2a\u6570\n        \/\/\u628a\u5927\u590d\u9009\u6846\u7684\u72b6\u6001\u8d4b\u503c\u7ed9\u6240\u6709\u7684\u5c0f\u590d\u9009\u6846\n        \/\/ console.log(document.querySelectorAll('.ck:checked').length)\n        \/\/ console.log(document.querySelectorAll('.ck:checked').length === cks.length)\n        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length\n      })\n    }\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
 css\u4f2a\u7c7b\u9009\u62e9\u5668<\/h2>\n\n\n\n
placeholder <\/p>\n\n\n\n
<head>\n<meta charset=\"UTF-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document<\/title>\n<style>\n\/*\u9009\u62e9\u88ab\u52fe\u9009\u7684\u590d\u9009\u6846*\/\n.ck:checked {\nwidth:20px;\nheight: 20px; \n}\n<\/style>\n<\/head> \n<body>\n<input type=\"checkbox\" name=\"\" id=\"\" class=\"ck\"> \n<input type=\"checkbox\" name=\"\" id=\"\" class=\"ck\"> \n<input type=\"checkbox\" name=\"\" id=\"\" class=\"ck\"> \n<input type=\"checkbox\" name=\"\" id=\"\" class=\"ck\"> \n<\/body>\n<\/html> <\/code><\/pre>\n\n\n\n
\u5373\u4e3a\u6309\u4e0b\u6309\u94aecheck\uff08\u68c0\u67e5\uff09\u662f\u5426\u7b26\u5408\uff0c\u7136\u540e\u53d8\u5927<\/p>\n\n\n\n
\u4e8b\u4ef6\u6d41<\/h1>\n\n\n\n
 \u4e8b\u4ef6\u6d41\u548c\u4e24\u4e2a\u9636\u6bb5\u8bf4\u660e
\u4e8b\u4ef6\u6d41 \u6307\u7684\u662f\u4e8b\u4ef6\u5b8c\u6574\u6267\u884c\u8fc7\u7a0b\u4e2d\u7684\u6d41\u52a8\u8def\u5f84\u3002 \u200b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u8bf4\u660e\uff1a\u5047\u8bbe\u9875\u9762\u91cc\u6709\u4e2adiv\uff0c\u5f53\u89e6\u53d1\u4e8b\u4ef6\u65f6\uff0c\u4f1a\u7ecf\u5386\u4e24\u4e2a\u9636\u6bb5\uff0c\u5206\u522b\u662f\u6355\u83b7\u9636\u6bb5\u3001\u5192\u6ce1\u9636\u6bb5
\u7b80\u5355\u6765\u8bf4\uff1a\u6355\u83b7\u9636\u6bb5\u662f\u4ece\u7236\u5230\u5b50\uff0c\u5192\u6ce1\u9636\u6bb5\u662f\u4ece\u5b50\u5230\u7236
\u5b9e\u9645\u5de5\u4f5c\u90fd\u662f\u4f7f\u7528\u4e8b\u4ef6\u5192\u6ce1\u4e3a\u4e3b\u3002<\/p>\n\n\n\n
\u4e8b\u4ef6\u6355\u83b7<\/h3>\n\n\n\n
\u4e8b\u4ef6\u6355\u83b7\u6982\u5ff5\uff1a \u4eceDOM\u7684\u6839\u5143\u7d20\u5f00\u59cb\u53bb\u6267\u884c\u5bf9\u5e94\u7684\u4e8b\u4ef6 (\u4ece\u5916\u5230\u91cc)
\u4ee3\u7801\uff1a DOM.addEventListener(\u4e8b\u4ef6\u7c7b\u578b, \u4e8b\u4ef6\u5904\u7406\u51fd\u6570, \u662f\u5426\u4f7f\u7528\u6355\u83b7\u673a\u5236)<\/strong>
\u8bf4\u660e\uff1a
\u25cf addEventListener\u7b2c\u4e09\u4e2a\u53c2\u6570\u4f20\u5165 true \u4ee3\u8868\u662f \u6355\u83b7\u9636\u6bb5 \u89e6\u53d1\uff08\u5f88\u5c11\u4f7f\u7528\uff09
\u25cf \u82e5\u4f20\u5165 false \u4ee3\u8868 \u5192\u6ce1\u9636\u6bb5 \u89e6\u53d1\uff0c\u9ed8\u8ba4\u5c31\u662ffalse
\u25cf \u82e5\u662f\u7528 L0 \u4e8b\u4ef6\u76d1\u542c\uff0c\u5219\u53ea\u6709\u5192\u6ce1\u9636\u6bb5\uff0c\u6ca1\u6709\u6355\u83b7<\/p>\n\n\n\n
\u4e8b\u4ef6\u5192\u6ce1<\/h3>\n\n\n\n
\u4e8b\u4ef6\u5192\u6ce1\u6982\u5ff5: \u5f53\u4e00\u4e2a\u5143\u7d20\u7684\u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\uff0c\u540c\u6837\u7684\u4e8b\u4ef6\u5c06\u4f1a\u5728\u8be5\u5143\u7d20\u7684\u6240\u6709\u7956\u5148\u5143\u7d20\u4e2d\u4f9d\u6b21\u88ab\u89e6\u53d1\u3002\u8fd9\u4e00\u8fc7\u7a0b\u88ab\u79f0\u4e3a\u4e8b\u4ef6\u5192\u6ce1\u3002
\u7b80\u5355\u7406\u89e3\uff1a\u5f53\u4e00\u4e2a\u5143\u7d20\u89e6\u53d1\u4e8b\u4ef6\u540e\uff0c\u4f1a\u4f9d\u6b21\u5411\u4e0a\u8c03\u7528\u6240\u6709\u7236\u7ea7\u5143\u7d20\u7684 \u540c\u540d\u4e8b\u4ef6 \u3002\u6bd4\u5982click\u4e8b\u4ef6
\u4e8b\u4ef6\u5192\u6ce1\u662f\u9ed8\u8ba4\u5b58\u5728\u7684\u3002L2\u4e8b\u4ef6\u76d1\u542c\u7b2c\u4e09\u4e2a\u53c2\u6570\u662f false\uff0c\u6216\u8005\u9ed8\u8ba4\u90fd\u662f\u5192\u6ce1\u3002<\/p>\n\n\n\n
\u963b\u6b62\u5192\u6ce1<\/h3>\n\n\n\n
\u95ee\u9898\uff1a \u56e0\u4e3a\u9ed8\u8ba4\u5c31\u6709\u5192\u6ce1\u6a21\u5f0f\u7684\u5b58\u5728\uff0c\u6240\u4ee5\u5bb9\u6613\u5bfc\u81f4\u4e8b\u4ef6\u5f71\u54cd\u5230\u7236\u7ea7\u5143\u7d20
\u9700\u6c42\uff1a \u82e5\u60f3\u628a\u4e8b\u4ef6\u5c31\u9650\u5236\u5728\u5f53\u524d\u5143\u7d20\u5185\uff0c\u5c31\u9700\u8981\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1
\u524d\u63d0\uff1a \u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\u9700\u8981\u62ff\u5230\u4e8b\u4ef6\u5bf9\u8c61
\u8bed\u6cd5\uff1a \u4e8b\u4ef6\u5bf9\u8c61.stopPropagation()<\/strong>
\u6ce8\u610f\uff1a \u6b64\u65b9\u6cd5\u53ef\u4ee5\u963b\u65ad\u4e8b\u4ef6\u6d41\u52a8\u4f20\u64ad\uff0c\u4e0d\u5149\u5728\u5192\u6ce1\u9636\u6bb5\u6709\u6548\uff0c\u6355\u83b7\u9636\u6bb5\u4e5f\u6709\u6548<\/p>\n\n\n\n
man\uff01hahahaha\uff0cwhatcanisay\uff1f<\/p>\n\n\n\n
<body>\n  <div class=\"father\">\n    <div class=\"son\"><\/div>\n  <\/div>\n  <script>\n    const fa = document.querySelector('.father')\n    const son = document.querySelector('.son')\n    document.addEventListener('click', function () {\n      alert('\u6211\u662f\u7237\u7237')\n    })\n    fa.addEventListener('click', function () {\n      alert('\u6211\u662f\u7238\u7238')\n    })\n    son.addEventListener('click', function (e) {\n      alert('\u6211\u662f\u513f\u5b50')\n      \/\/ \u963b\u6b62\u6d41\u52a8\u4f20\u64ad  \u4e8b\u4ef6\u5bf9\u8c61.stopPropagation()\n      e.stopPropagation()\n    })\n \n  <\/script>\n<\/body><\/code><\/pre>\n\n\n\n
\u62d3\u5c55\uff1f<\/h4>\n\n\n\n
\u6211\u4eec\u67d0\u4e9b\u60c5\u51b5\u4e0b\u9700\u8981 \u963b\u6b62 \u9ed8\u8ba4\u884c\u4e3a \u7684\u53d1\u751f\uff0c\u6bd4\u5982 \u963b\u6b62 \u94fe\u63a5\u7684\u8df3\u8f6c\uff0c\u8868\u5355\u57df\u8df3\u8f6c
\u8bed\u6cd5\uff1a e.preventDefault()<\/p>\n\n\n\n
<body>\n  <form action=\"http:\/\/www.itcast.cn\">\n    <input type=\"submit\" value=\"\u514d\u8d39\u6ce8\u518c\">\n  <\/form>\n  <script>\n    const form = document.querySelector('form')\n    form.addEventListener('submit', function (e) {\n      \/\/ \u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a  \u63d0\u4ea4\n      e.preventDefault()\n    })\n  <\/script>\n<\/body><\/code><\/pre>\n\n\n\n
\u89e3\u7ed1\u4e8b\u4ef6<\/h3>\n\n\n\n
on\u4e8b\u4ef6\u65b9\u5f0f\uff0c\u76f4\u63a5\u4f7f\u7528null\u8986\u76d6\u5076\u5c31\u53ef\u4ee5\u5b9e\u73b0\u4e8b\u4ef6\u7684\u89e3\u7ed1<\/p>\n\n\n\n
\/\/\u7ed1\u5b9a\u4e8b\u4ef6\nbtn.onclick=function(){\n    alert('')\n}\n\/\/\u89e3\u7ed1\u4e8b\u4ef6\nbtn.onclick=null<\/code><\/pre>\n\n\n\n
\u672c\u8d28\u4e0a\u4e5f\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u90fd\u662f\u5f15\u7528\u7c7b\u578b\u7684 <\/p>\n\n\n\n
<body>\n  <button>\u70b9\u51fb<\/button>\n  <script>\n    const btn = document.querySelector('button')\n    btn.onclick = function () {\n      alert('\u70b9\u51fb\u4e86')\n      \/\/ L0 \u4e8b\u4ef6\u79fb\u9664\u89e3\u7ed1\n      btn.onclick = null\n    }\n  <\/script>\n<\/body><\/code><\/pre>\n\n\n\n
addEventListener\u65b9\u5f0f\u5fc5\u987b\u4f7f\u7528\u3002<\/p>\n\n\n\n
\u533f\u540d\u51fd\u6570\u6216\u7bad\u5934\u51fd\u6570\u5728\u89e3\u7ed1\u65f6\u4f1a\u9047\u5230\u95ee\u9898\uff0c\u56e0\u4e3a\u4f60\u65e0\u6cd5\u63d0\u4f9b\u4e00\u4e2a\u76f8\u540c\u7684\u51fd\u6570\u5f15\u7528\u6765\u89e3\u7ed1\u3002\u6240\u4ee5\u6700\u597d\u662f\u4f7f\u7528\u547d\u540d\u51fd\u6570\u8fdb\u884c\u4e8b\u4ef6\u7ed1\u5b9a\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728\u9700\u8981\u65f6\u89e3\u7ed1\u3002<\/p>\n\n\n\n
target.removeEventListener(\u4e8b\u4ef6\u7c7b\u578b,\u4e8b\u4ef6\u5904\u7406\u51fd\u6570, [,\u83b7\u53d6\u6355\u83b7\u6216\u8005\u5192\u6ce1\u9636\u6bb5])<\/strong><\/p>\n\n\n\n
<body>\n  <button>\u70b9\u51fb<\/button>\n  <script>\n    const btn = document.querySelector('button')\n    function fn() {\n      alert('\u70b9\u51fb\u4e86')\n    }\n    btn.addEventListener('click', fn)\n    \/\/ L2 \u4e8b\u4ef6\u79fb\u9664\u89e3\u7ed1\n    btn.removeEventListener('click', fn)\n  <\/script>\n<\/body><\/code><\/pre>\n\n\n\n
\u62d3\u5c55\uff1a\u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\u7684\u533a\u522b\u3001\u4e24\u79cd\u6ce8\u518c\u4e8b\u4ef6\u7684\u533a\u522b
\u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\uff1a
\u25cf mouseover \u548c mouseout \u4f1a\u6709\u5192\u6ce1\u6548\u679c
\u25cf mouseenter \u548c mouseleave \u6ca1\u6709\u5192\u6ce1\u6548\u679c (\u63a8\u8350)
\u4e24\u79cd\u6ce8\u518c\u4e8b\u4ef6\uff1a
\u25cf \u4f20\u7edfon\u6ce8\u518c\uff08L0\uff09
\u540c\u4e00\u4e2a\u5bf9\u8c61,\u540e\u9762\u6ce8\u518c\u7684\u4e8b\u4ef6\u4f1a\u8986\u76d6\u524d\u9762\u6ce8\u518c(\u540c\u4e00\u4e2a\u4e8b\u4ef6)
\u76f4\u63a5\u4f7f\u7528null\u8986\u76d6\u5076\u5c31\u53ef\u4ee5\u5b9e\u73b0\u4e8b\u4ef6\u7684\u89e3\u7ed1
\u90fd\u662f\u5192\u6ce1\u9636\u6bb5\u6267\u884c\u7684
\u25cf \u4e8b\u4ef6\u76d1\u542c\u6ce8\u518c\uff08L2\uff09
\u8bed\u6cd5: addEventListener(\u4e8b\u4ef6\u7c7b\u578b, \u4e8b\u4ef6\u5904\u7406\u51fd\u6570, \u662f\u5426\u4f7f\u7528\u6355\u83b7)
\u540e\u9762\u6ce8\u518c\u7684\u4e8b\u4ef6\u4e0d\u4f1a\u8986\u76d6\u524d\u9762\u6ce8\u518c\u7684\u4e8b\u4ef6(\u540c\u4e00\u4e2a\u4e8b\u4ef6)
\u53ef\u4ee5\u901a\u8fc7\u7b2c\u4e09\u4e2a\u53c2\u6570\u53bb\u786e\u5b9a\u662f\u5728\u5192\u6ce1\u6216\u8005\u6355\u83b7\u9636\u6bb5\u6267\u884c
\u5fc5\u987b\u4f7f\u7528removeEventListener(\u4e8b\u4ef6\u7c7b\u578b, \u4e8b\u4ef6\u5904\u7406\u51fd\u6570, \u83b7\u53d6\u6355\u83b7\u6216\u8005\u5192\u6ce1\u9636\u6bb5)
\u533f\u540d\u51fd\u6570\u65e0\u6cd5\u88ab\u89e3\u7ed1<\/p>\n\n\n\n
\u5bf9\u4e8e\u9f20\u6807\u7ecf\u8fc7\u548c\u79bb\u5f00\u7684\u6848\u4f8b<\/strong><\/p>\n\n\n\n
\u653e\u5728\u7c89\u8272\u533a\u57df\u662f\u7ecf\u8fc7\u7236\uff0c\u4ece\u7c89\u5230\u7d2b\u662f\u9f20\u6807\u662f\u5148\u79bb\u5f00\u7236\uff0c\u7136\u540e\u7ecf\u8fc7\u5b50\uff0c\u518d\u7531\u5192\u6ce1\u7ecf\u8fc7\u7236\u3002
\u6240\u4ee5\u8bf4\u5982\u679c\u5b50\u7ea7\u6ca1\u6709\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u4e8b\u4ef6\u540c\u6837\u4f1a\u5192\u6ce1\u3002\u867d\u7136\u6ca1\u6709\u8868\u73b0\uff0c\u4f46\u4e8b\u4ef6\u786e\u5b9e\u4f20\u9012\u4e86\u3002\u5e76\u4e0d\u662f\u8bf4\u4e0d\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u5c31\u4e0d\u4f1a\u5192\u6ce1\uff0c\u53ea\u80fd\u8bf4\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u53ef\u4ee5\u7528\u6765\u4f53\u73b0\u5192\u6ce1\u8fc7\u7a0b\u3002<\/strong><\/p>\n\n\n\n
baby\u6ca1\u6709\u5b9a\u4e49\u76d1\u542c\uff0c\u4f46\u9f20\u6807\u8fdb\u5165baby\u8fd9\u4ef6\u4e8b\u60c5\u786e\u786e\u5b9e\u5b9e\u53d1\u751f\u4e86\u5e76\u901a\u8fc7\u5192\u6ce1\u4f20\u9012\u7ed9\u4e86dad\uff0c\u800cdad\u6709\u5b9a\u4e49\u4e8b\u4ef6\u76d1\u542c\u5c31\u6267\u884c\u4e86\u76f8\u5e94\u7684\u4ee3\u7801\uff0c\u6240\u4ee5\u6355\u83b7\u548c\u5192\u6ce1\u4e0d\u4e00\u5b9a\u662f\u4e00\u4ef6\u597d\u4e8b\u3002<\/strong><\/p>\n\n\n\n
\u4e8b\u4ef6\u59d4\u6258<\/h1>\n\n\n\n
\u4e8b\u4ef6\u59d4\u6258\u662f\u5229\u7528\u4e8b\u4ef6\u6d41\u7684\u7279\u5f81\u89e3\u51b3\u4e00\u4e9b\u5f00\u53d1\u9700\u6c42\u7684\u77e5\u8bc6\u6280\u5de7\u3002
\u4f18\u70b9\uff1a\u51cf\u5c11\u6ce8\u518c\u6b21\u6570\uff0c\u53ef\u4ee5\u63d0\u9ad8\u7a0b\u5e8f\u6027\u80fd\u3002
\u539f\u7406\uff1a\u4e8b\u4ef6\u59d4\u6258\u5176\u5b9e\u662f\u5229\u7528 \u4e8b\u4ef6\u5192\u6ce1 \u7684\u7279\u70b9\u3002 \u7ed9 \u7236\u5143\u7d20\u6ce8\u518c\u4e8b\u4ef6 \uff0c\u5f53\u6211\u4eec\u89e6\u53d1\u5b50\u5143\u7d20\u7684\u65f6\u5019\uff0c\u4f1a\u5192\u6ce1\u5230\u7236\u5143\u7d20\u8eab\u4e0a\uff0c\u4ece\u800c\u89e6\u53d1\u7236\u5143\u7d20\u7684\u4e8b\u4ef6\u3002
\u5b9e\u73b0\uff1a \u4e8b\u4ef6\u5bf9\u8c61.target. tagName \u53ef\u4ee5\u83b7\u5f97\u771f\u6b63\u89e6\u53d1\u4e8b\u4ef6\u7684\u5143\u7d20 
\u5982\uff1aul.addEventListener('click' , function(){}) \u6267\u884c\u7236\u7ea7\u70b9\u51fb\u4e8b\u4ef6<\/p>\n\n\n\n
 \u5176\u5b9e\u5c31\u76f8\u5f53\u4e8ecss\u5b50\u5c5e\u6027\u627e\u4e0d\u5230\u4e86\uff0c\u7ee7\u627f\u7236\u5143\u7d20\u7684\u5c5e\u6027<\/p>\n\n\n\n
<\/head>\n<body>\n<ul>\n<li>\u7b2c1\u4e2a\u5b69\u5b50<\/li>\n<li>\u7b2c2\u4e2a\u5b69\u5b50<\/li>\n<li>\u7b2c3\u4e2a\u5b69\u5b50<\/li>\n<li>\u7b2c4\u4e2a\u5b69\u5b50<\/li>\n<li>\u7b2c5\u4e2a\u5b69\u5b50<\/li>\n<\/ul>\n<script>\n\/\/\u70b9\u51fb\u6bcf\u4e2a\u5c0fli \u5f53\u524dLi \u6587\u5b57\u53d8\u4e3a\u7ea2\u8272\n\/\/\u6309\u7167\u4e8b\u4ef6\u59d4\u6258\u7684\u65b9\u5f0f \u59d4\u6258\u7ed9\u7236\u7ea7\uff0c\u4e8b\u4ef6\u5199\u5230\u7236\u7ea7\u8eab\u4e0a\n\/\/1\uff0e\u83b7\u5f97\u7236\u5143\u7d20\nconst ul = document.querySelector('ul') \nul.addEventListener('click', function () { \n  \/*  alert(11)\n    e.target.style.color='red'*\/\n\/\/\u5f53\u6211\u4eec\u53ea\u8981li\u53d8\u8272\u65f6\u5019\uff0c\n    if(e.target.tagName==='LI'){\n     e.target.style.color='red'\/\/\u90a3\u4e3a\u4ec0\u4e48\u4e0d\u76f4\u63a5\u5224\u65adtarget \u662f\u4e0d\u662fli \u5462\uff1f\n}\n}) \n<\/script> \n<\/body> \n<\/html> <\/code><\/pre>\n\n\n\n
\u6539\u8fdbtab\u680f<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n \n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>tab\u680f\u5207\u6362<\/title>\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n    }\n \n    .tab {\n      width: 590px;\n      height: 340px;\n      margin: 20px;\n      border: 1px solid #e4e4e4;\n    }\n \n    .tab-nav {\n      width: 100%;\n      height: 60px;\n      line-height: 60px;\n      display: flex;\n      justify-content: space-between;\n    }\n \n    .tab-nav h3 {\n      font-size: 24px;\n      font-weight: normal;\n      margin-left: 20px;\n    }\n \n    .tab-nav ul {\n      list-style: none;\n      display: flex;\n      justify-content: flex-end;\n    }\n \n    .tab-nav ul li {\n      margin: 0 20px;\n      font-size: 14px;\n    }\n \n    .tab-nav ul li a {\n      text-decoration: none;\n      border-bottom: 2px solid transparent;\n      color: #333;\n    }\n \n    .tab-nav ul li a.active {\n      border-color: #e1251b;\n      color: #e1251b;\n    }\n \n    .tab-content {\n      padding: 0 16px;\n    }\n \n    .tab-content .item {\n      display: none;\n    }\n \n    .tab-content .item.active {\n      display: block;\n    }\n  <\/style>\n<\/head>\n \n<body>\n  <div class=\"tab\">\n    <div class=\"tab-nav\">\n      <h3>\u6bcf\u65e5\u7279\u4ef7<\/h3>\n      <ul>\n        <li><a class=\"active\" href=\"javascript:;\" data-id=\"0\">\u7cbe\u9009<\/a><\/li>\n        <li><a href=\"javascript:;\" data-id=\"1\">\u7f8e\u98df<\/a><\/li>\n        <li><a href=\"javascript:;\" data-id=\"2\">\u767e\u8d27<\/a><\/li>\n        <li><a href=\"javascript:;\" data-id=\"3\">\u4e2a\u62a4<\/a><\/li>\n        <li><a href=\"javascript:;\" data-id=\"4\">\u9884\u544a<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"tab-content\">\n      <div class=\"item active\"><img src=\".\/images\/tab00.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab01.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab02.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab03.png\" alt=\"\" \/><\/div>\n      <div class=\"item\"><img src=\".\/images\/tab04.png\" alt=\"\" \/><\/div>\n    <\/div>\n  <\/div>\n  <script>\n    \/\/ \u91c7\u53d6\u4e8b\u4ef6\u59d4\u6258\u7684\u5f62\u5f0f tab\u680f\u5207\u6362\n    \/\/ 1. \u83b7\u53d6 ul \u7236\u5143\u7d20 \u56e0\u4e3a ul\u53ea\u6709\u4e00\u4e2a\n    const ul = document.querySelector('.tab-nav ul')\n    \/\/ \u83b7\u53d6 5\u4e2a item \n    const items = document.querySelectorAll('.tab-content .item')\n    \/\/ 2. \u6dfb\u52a0\u4e8b\u4ef6\n    ul.addEventListener('click', function (e) {\n      \/\/ console.log(e.target)  \/\/ e.target\u662f\u6211\u4eec\u70b9\u51fb\u7684\u5bf9\u8c61\n      \/\/ \u6211\u4eec\u53ea\u6709\u70b9\u51fb\u4e86 a \u624d\u4f1a \u8fdb\u884c \u6dfb\u52a0\u7c7b\u548c\u5220\u9664\u7c7b\u64cd\u4f5c \n      \/\/ console.log(e.target.tagName)  \/\/ e.target.tagName \u70b9\u51fb\u90a3\u4e2a\u5bf9\u8c61\u7684 \u6807\u7b7e\u540d\n      if (e.target.tagName === 'A') {\n        \/\/ console.log('\u6211\u9009\u7684\u662fa')\n        \/\/ \u6392\u4ed6\u601d\u60f3 \uff0c\u5148\u79fb\u9664\u539f\u6765\u7684active  \n        document.querySelector('.tab-nav .active').classList.remove('active')\n        \/\/\u5f53\u524d\u5143\u7d20\u6dfb\u52a0 active  \u662f e.target\n        \/\/ this \u6307\u5411ul \u4e0d\u80fd\u7528this \n        e.target.classList.add('active')\n \n        \/\/ \u4e0b\u9762\u5927\u76d2\u5b50\u6a21\u5757\n        \/\/ console.log(e.target.dataset.id)\n        \/\/ \u83b7\u53d6\u7684\u662f\u5b57\u7b26\u4e32\uff0c\u9700\u8f6c\u6362\u4e3a\u6570\u5b57\n        const i = +e.target.dataset.id\n        \/\/ \u6392\u4ed6\u601d\u60f3 \uff0c\u5148\u79fb\u9664\u539f\u6765\u7684active \n        document.querySelector('.tab-content .active').classList.remove('active')\n        \/\/ \u5bf9\u5e94\u7684\u5927\u76d2\u5b50 \u6dfb\u52a0 active \n        \/\/ document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')\n        items[i].classList.add('active')\n      }\n    })\n  <\/script>\n<\/body>\n \n<\/html><\/code><\/pre>\n\n\n\n
\u81ea\u5b9a\u4e49\u5c5e\u6027<\/h3>\n\n\n\n
date-id=\u201c0\u201d <\/p>\n\n\n\n
\u67e5\u627e\u662f.dateset.id \u200b<\/p>\n","protected":false},"excerpt":{"rendered":"
\u73af\u5883\u5bf9\u8c61 \u73af\u5883\u5bf9\u8c61\uff1a \u6307\u7684\u662f\u51fd\u6570\u5185\u90e8\u7279\u6b8a\u7684 \u53d8\u91cf this \uff0c \u5b83\u4ee3\u8868\u7740\u5f53\u524d\u51fd\u6570\u8fd0\u884c\u65f6\u6240\u5904\u7684\u73af\u5883\u4f5c\u7528\uff1a \u5f04\u6e05\u695athis\u7684\u6307\u5411\uff0c\u53ef\u4ee5 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[2],"tags":[12,10],"class_list":["post-422","post","type-post","status-publish","format-standard","hentry","category-2","tag-js","tag-10"],"_links":{"self":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=422"}],"version-history":[{"count":0,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions"}],"wp:attachment":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}