{"id":1139,"date":"2022-05-07T08:42:33","date_gmt":"2022-05-07T00:42:33","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=1139"},"modified":"2023-02-16T14:43:29","modified_gmt":"2023-02-16T06:43:29","slug":"22-23-24-shi-jian-xiang-guan","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1139","title":{"rendered":"22 – 23 – 24 \u4e8b\u4ef6\u76f8\u5173"},"content":{"rendered":"

<\/span><\/a>\u4e8b\u4ef6\u548c\u4e8b\u4ef6\u5904\u7406<\/h2>\n

\"\"<\/p>\n

\u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/events-event-handling-f28<\/a><\/p>\n

<\/span><\/a>\u4e8b\u4ef6<\/h3>\n

\u4f60\u5bf9\u52a8\u4f5c\uff08\u7cfb\u7edf\u7684\u6216\u7528\u6237\u4ea7\u751f\u7684\uff09\u7684\u54cd\u5e94\u5c31\u662f\u8c03\u7528\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u5bf9\u4e8b\u4ef6\u7684\u56de\u5e94\u5c31\u662f\u8c03\u7528\u4e00\u4e2a\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u3002<\/p>\n

\u4f8b\u5982\uff0c\u5f53\u7528\u6237\u70b9\u51fb\u4e00\u4e2a\u6309\u94ae\u540e\uff0c\u6211\u4eec\u53ef\u80fd\u4f1a\u663e\u793a\u4e00\u4e2a\u5e26\u4fe1\u606f\u7684\u5f39\u6846\uff0c\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u4e8b\u4ef6\u662f click<\/strong> \u5904\u7406\u7ed3\u679c\u5c31\u662f\u5c55\u793a\u4e00\u4e2a\u5f39\u6846\u3002<\/p>\n

\u7f51\u9875\u4e0a\u4f1a\u53d1\u751f\u5f88\u591a\u4e8b\u4ef6\uff1a<\/p>\n

    \n
  1. \u7528\u6237 hover \u4e00\u4e2a\u5143\u7d20\u4e0a<\/li>\n
  2. \u8868\u5355\u7684\u63d0\u4ea4<\/li>\n
  3. \u89c6\u9891\u505c\u6b62\u64ad\u653e<\/li>\n
  4. \u7528\u6237\u4ece\u4e00\u4e2a\u56fe\u7247\u4e0a\u6eda\u52a8\u8fc7\u53bb<\/li>\n
  5. \u6539\u53d8\u6d4f\u89c8\u5668\u7684\u5927\u5c0f<\/li>\n
  6. \u6309\u952e<\/li>\n
  7. \u6587\u6863\u52a0\u8f7d\u7ed3\u675f<\/li>\n<\/ol>\n

    <\/span><\/a>\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f<\/h3>\n

    \u6211\u4e0a\u9762\u5df2\u7ecf\u7b80\u5355\u63d0\u5230\u8fc7\uff0c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5c31\u662f\u6211\u4eec\u5982\u4f55\u54cd\u5e94\u4e8b\u4ef6\u7684\u65b9\u6cd5\u3002\u5b83\u662f\u4e8b\u4ef6\u53d1\u751f\u65f6\u6267\u884c\u7684\u4e00\u5757\u4ee3\u7801\u3002<\/p>\n

    \u6211\u4eec\u7ecf\u5e38\u4f1a\u628a event listeners<\/strong> \u548c evetn handlers<\/strong> \u4ea4\u66ff\u4f7f\u7528\uff0c\u540c\u6837\u4f60\u4e5f\u53ef\u4ee5\u50cf\u8fd9\u6837\u968f\u610f\u4f7f\u7528\u3002<\/p>\n

    \u53ef\u662f\uff0c\u5b83\u4fe9\u6709\u70b9\u5c0f\u533a\u522b\uff0clisteners<\/strong> \u662f\u76d1\u542c\u4e00\u4e2a\u4e8b\u4ef6\u7684\u53d1\u751f\u800c handler<\/strong> \u662f\u6267\u884c\u7684\u5177\u4f53\u4ee3\u7801\u3002<\/p>\n

    <\/span><\/a>\u6848\u4f8b<\/h3>\n

    \u5047\u8bbe\u6211\u4eec\u7684\u9875\u9762\u6709\u4e00\u4e2a\u6309\u94ae\u3002<\/p>\n

    <button class="btn-primary">Click Me!<\/button>\n<\/code><\/pre>\n
    \u6211\u4eec\u4e3a\u6309\u94ae\u7ed1\u5b9a\u4e86\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u5f53\u70b9\u51fb\u5b83\u65f6\u6253\u5370\u4e00\u6761\u6d88\u606f\u3002<\/p>\n
    const myButton = document.querySelector(".btn-primary");\n\nmyButton.addEventListener("click", function() {\n    console.log("The button was clicked");\n});\n<\/code><\/pre>\n
    \u53d1\u751f\u4e86\u4ec0\u4e48\uff1a<\/p>\n
      \n
    1. \u6211\u4eec\u4f7f\u7528 querySelector<\/strong>\u83b7\u53d6\u5230\u6d4f\u89c8\u5668 DOM \u4e2d\u7684\u6309\u94ae\uff1b<\/li>\n
    2. \u63a5\u7740\u6211\u4eec\u4f7f\u7528 addEventListener<\/strong> \u6dfb\u52a0\u4e86\u4e8b\u4ef6\u4fa6\u542c\u5668\uff1b<\/li>\n
    3. addEventListner<\/strong> \u63a5\u53d7\u4e86\u4e24\u4e2a\u53c2\u6570\uff08\u5b9e\u9645\u53ef\u4ee5\u63a5\u53d7\u4e09\u4e2a\u53c2\u6570\uff09\uff1b<\/li>\n
    4. \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4e8b\u4ef6\u7c7b\u578b\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u7684\u4e8b\u4ef6\u7c7b\u578b\u662f click\uff1b<\/li>\n
    5. \u7b2c\u4e8c\u4e2a\u53c2\u6570\u5c31\u662f\u4e00\u65e6\u70b9\u51fb\u65f6\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570<\/li>\n<\/ol>\n
      \u6d4f\u89c8\u5668\u77e5\u9053\u7528\u6237\u4ec0\u4e48\u65f6\u5019\u70b9\u51fb\u4e86\u6309\u94ae\uff0c\u540c\u65f6\u4e3a\u6709\u7c7b\u540d btn-primary<\/strong> \u7684\u6309\u94ae\u6ce8\u518c\u4e86\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u7136\u540e\u6267\u884c\u76f8\u5173\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u5c06\u4f1a\u6253\u5370\uff1a<\/p>\n
      The button was clicked\n<\/code><\/pre>\n
      \u56de\u8c03\u65b9\u6cd5\u662f\u4e00\u4e2a\u533f\u540d\u51fd\u6570\uff0c\u5b83\u4e0d\u80fd\u88ab\u5176\u5b83\u5730\u65b9\u5f15\u7528\u3002\u6211\u4eec\u4e0d\u7ecf\u5e38\u4f7f\u7528\u533f\u540d\u51fd\u6570\uff0c\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u547d\u540d\u51fd\u6570\u7136\u540e\u4f20\u9012\u7ed9\u5b83\u3002\u547d\u540d\u51fd\u6570\u662f\u53ef\u91cd\u7528\u6027\u7684\u9996\u9009\uff0c\u5b83\u4f7f\u6211\u4eec\u80fd\u591f\u5728\u4ee5\u540e\u5220\u9664\u4e8b\u4ef6\u4fa6\u542c\u5668\u3002<\/p>\n
      <\/span><\/a>\u4f7f\u7528\u547d\u540d\u51fd\u6570<\/h3>\n
      \u4e8b\u4ef6\u5904\u7406\u5668\u53ef\u4ee5\u662f\u4e00\u4e2a\u547d\u540d\u51fd\u6570\u3002<\/p>\n
      const myButton = document.querySelector(".btn-primary");\n\nconst handleClick = function() {\n    console.log("The button was clicked");\n};\n\nmyButton.addEventListener("click", handleClick);\n<\/code><\/pre>\n
      \u8fd9\u6837\u5e76\u4e0d\u4ec5\u4ec5\u662f\u4ee3\u7801\u66f4\u7b80\u6d01\uff0c\u5b83\u8fd8\u6709\u4e24\u4e2a\u4f18\u70b9\uff1a<\/p>\n
        \n
      1. \u91cd\u7528\u6027<\/strong>\uff1a\u8bbe\u60f3\u4f60\u6709\u5f88\u591a\u6309\u94ae\u9700\u8981\u6253\u5370\u76f8\u540c\u7684\u8bed\u53e5\uff0c\u4e00\u4e2a\u547d\u540d\u51fd\u6570\u53ef\u4ee5\u88ab\u4f7f\u7528\u591a\u6b21\u800c\u4e0d\u8981\u5199\u91cd\u590d\u7684\u4ee3\u7801\u3002<\/li>\n
      2. \u79fb\u51fa\u4e8b\u4ef6\u4fa6\u542c\u5668<\/strong>\uff1a\u4f7f\u7528 removeEventListener<\/code> \u6765\u79fb\u51fa\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u4e3a\u4e86\u79fb\u51fa\u5b83\u9700\u8981\u4f20\u9012\u4e24\u4e2a\u5173\u952e\u53c2\u6570\u3002\u7b2c\u4e00\u4e2a\u662f\u5b9e\u9645\u7c7b\u578b\uff0c\u7b2c\u4e8c\u4e2a\u662f\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u3002\u82e5\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u662f\u4e00\u4e2a\u533f\u540d\u51fd\u6570\u6211\u4eec\u65e0\u6cd5\u6307\u5b9a\u7b2c\u4e8c\u4e2a\u53c2\u6570\u3002\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u662f\u547d\u540d\u51fd\u6570\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u505a\uff1a<\/li>\n<\/ol>\n
        myButton.removeEventListener("click", handleClick);\n<\/code><\/pre>\n
        <\/span><\/a>\u4e8b\u4ef6\u5192\u6ce1<\/h2>\n
        \"\"<\/p>\n
        \u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/event-bubbling-pb3<\/a><\/p>\n
        <\/span><\/a>\u7b80\u4ecb<\/h3>\n
        \u4e0a\u9762\u6211\u4eec\u8c08\u4e86\u4e8b\u4ef6\u548c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u4ee5\u53ca\u4e3a\u4e8b\u4ef6\u6dfb\u52a0\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u3002\u5f53\u4e8b\u4ef6\u53d1\u751f\u65f6\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5c06\u4f1a\u88ab\u8c03\u7528\u3002<\/p>\n
        JavaScript \u4e2d\u7684\u4e8b\u4ef6\u5192\u6ce1\u662f\u6307\u5f53\u5143\u7d20\u4e0a\u53d1\u751f\u4e00\u4e2a\u4e8b\u4ef6\u65f6\uff0c\u5173\u8054\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4f1a\u88ab\u8c03\u7528\uff0c\u7d27\u63a5\u7740\u662f\u7236\u7ea7\u5143\u7d20\u548c\u66f4\u4e0a\u5c42\u5143\u7d20\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e5f\u4f1a\u88ab\u8c03\u7528\u3002<\/p>\n
        \u4f8b\u5b50\uff1a<\/p>\n
        <div onclick="alert('Click Event Happened')">\n    <p>If you have click this paragraph in the browser, the onclick handler of the div will get invoked.<\/p>\n<\/div>\n<\/code><\/pre>\n
        \u4e0a\u9762\u7684\u4f8b\u5b50\u662f\uff1a\u70b9\u51fb p \u6807\u7b7e\u5185\u7684\u6587\u672c\u65f6\uff0c\u4f1a\u89e6\u53d1 div \u4e0a\u7684 onclick<\/code> \u4e8b\u4ef6\u3002\u8fd9\u5c31\u662f p \u4e0a\u53d1\u751f\u7684\u4e8b\u4ef6\u5192\u6ce1\u5230\u4e86 div \u4e0a\u3002<\/p>\n
        \u5373\u4f7f\u6709 n  \u591a\u5c42\u5d4c\u5957\u7684\u5143\u7d20\u4e0a\u9762\u7684\u6a21\u5f0f\u4f9d\u65e7\u4e5f\u4f1a\u53d1\u751f\u3002<\/p>\n
        \u4f8b\u5b50\uff1a<\/p>\n
        <span onclick="alert('Span Clicked')">\n    <div onclick="alert('Div Clicked')">\n        <p onclick="alert('Paragraph Clicked')">Click Me.<\/p>\n    <\/div>\n<\/span>\n<\/code><\/pre>\n
        \u82e5\u6211\u4eec\u70b9\u51fb\u4e86 p \u6807\u7b7e\uff0c\u6d4f\u89c8\u5668\u4f1a\u89e6\u53d1\u4e09\u6b21\u5f39\u6846\u3002<\/p>\n
        <\/span><\/a>\u627e\u5230\u4e8b\u4ef6\u7684\u6e90\u5934\u5143\u7d20<\/h3>\n
        \u5f53\u4e8b\u4ef6\u5192\u6ce1\u7ecf\u8fc7\u591a\u5c42\u65f6\uff0c\u5f88\u96be\u8ffd\u8e2a\u5230\u662f\u54ea\u4e2a\u5143\u7d20\u4ea7\u751f\u4e86\u8fd9\u4e00\u4e32\u7684\u4e8b\u4ef6\u3002\u53ef\u662f JavaScript \u4e2d\u5f88\u5bb9\u6613\u505a\u5230\u3002<\/p>\n
        \u50cf\u4e0a\u9762\u7684\u4f8b\u5b50\uff0c\u82e5\u6211\u4eec\u70b9\u51fb\u4e86 p \u6807\u7b7e\uff0ctarget<\/code> \u6216 event.target<\/code> \u5c06\u4f1a\u6307\u5411\u5b83\uff0c\u65e0\u8bba\u4e8b\u4ef6\u5192\u6ce1\u4e86\u591a\u5c11\u5c42\uff0c\u800c event.target<\/code> \u6c38\u8fdc\u4e0d\u4f1a\u6539\u53d8\uff0c\u6307\u5411\u4e8b\u4ef6\u4ea7\u751f\u7684\u6e90\u5934\u3002<\/p>\n
        <\/span><\/a>\u5982\u4f55\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\uff1f<\/h3>\n
        \u5192\u6ce1\u7684\u4e8b\u4ef6\u5c06\u4e00\u76f4\u4f20\u9012\u5230 <html><\/code> \u5143\u7d20\uff0c\u6709\u4e9b\u8fd8\u4f1a\u5230 document<\/code>\uff0c\u5176\u4e2d\u4e00\u4e9b\u8fdb\u5165window<\/code>\u5bf9\u8c61\u3002<\/p>\n
        \u6211\u4eec\u5982\u679c\u4e0d\u60f3\u7236\u7ea7\u5143\u7d20\u7684\u4e8b\u4ef6\u53d1\u751f\uff0c\u53ef\u4ee5\u4f7f\u7528 event.stopPropagation()<\/code>\u3002<\/p>\n
        \u4f8b\u5b50\uff1a<\/p>\n
        <div onclick="alert('This will not alert')">\n  <button onclick="event.stopPropagation()">Click me<\/button>\n<\/div>\n<\/code><\/pre>\n
        \u82e5\u6211\u4eec\u70b9\u51fb\u4e86\u5e26\u6709 stopPropagation()<\/code>\u7684\u6309\u94ae\uff0cdiv \u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u6216 alert \u4e0d\u4f1a\u89e6\u53d1\u3002<\/p>\n
        <\/span><\/a>\u5982\u4f55\u963b\u6b62\u540c\u4e00\u4e2a\u5143\u7d20\u4e0a\u7684\u591a\u4e2a\u4e8b\u4ef6\uff1f<\/h3>\n
        \u6709\u65f6\u5019\u6211\u4eec\u4f1a\u4e3a\u540c\u4e00\u4e2a\u5143\u7d20\u7ed1\u5b9a\u540c\u4e00\u4e2a\u4e8b\u4ef6\u7ed1\u5b9a\u591a\u4e2a\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u6709\u65f6\u5019\u671f\u671b\u963b\u6b62\u5192\u6ce1\u4e5f\u60f3\u540e\u9762\u6ce8\u518c\u7684\u540c\u7c7b\u578b\u4e8b\u4ef6\u4e5f\u88ab\u963b\u6b62\uff0cevent.stopImmediatePropagation()<\/code> \u5c31\u53ef\u4ee5\u505a\u5230\u3002<\/p>\n
          <div onclick="alert(1)">\n    <div onclick="alert(2)">\n      <div id="target">ppp<\/div>\n    <\/div>\n  <\/div>\n<\/code><\/pre>\n
        let target = document.querySelector('#target')\n\nfunction testClick1(event){\n  alert(33)\n}\n\nfunction testClick2(event){\n  alert(44)\n  event.stopImmediatePropagation()\n  \/\/event.stopPropagation()\n}\n\n\nfunction testClick3(){\n  alert(55)\n}\n\nfunction moveHandler(){\n  alert('move')\n}\n\n\ntarget.addEventListener('click',testClick1)\n\ntarget.addEventListener('click',testClick2)\n\ntarget.addEventListener('click',testClick3)\n<\/code><\/pre>\n
        \u4e0a\u9762\u4f1a\u4f9d\u6b21\u5f39\u51fa\uff1a33\uff0c44<\/strong>\uff0c\u82e5\u628a\u4e0a\u9762\u7684\u6ce8\u91ca\u6362\u4e00\u4e0b\u5219\u4f9d\u6b21\u5f39\u51fa\uff1a33\uff0c44\uff0c55<\/strong>\u3002<\/p>\n
        \"\"<\/p>\n
        \u5728\u7ebf\u6848\u4f8b\uff1ahttps:\/\/jsbin.com\/xilorahomi\/edit?html,js,output<\/a><\/p>\n
        \u53c2\u8003\u6587\u6863\uff1ahttp:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopImmediatePropagation<\/a><\/p>\n
        <\/span><\/a>\u4e3a\u4f55\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\u53ef\u80fd\u4f1a\u662f\u9519\u8bef\u7684\uff1f<\/h3>\n
        \u5982\u679c\u7528\u6237\u70b9\u51fb\u7684\u5143\u7d20\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5e26\u6709stopPropagation()<\/code> \uff0c document \u4e0a\u7684\u70b9\u51fb\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff08\u4e3a\u4e86\u8ddf\u8e2a\u3001\u5206\u6790\u6216\u8c03\u7528\u5f39\u6846\uff09\u4e5f\u4e0d\u4f1a\u88ab\u89e6\u53d1\u3002\u6240\u4ee5\u8c28\u614e\u7684\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\u3002\u8fd9\u4e2a\u4ec5\u4ec5\u662f\u4e00\u4e2a\u4f8b\u5b50\uff0c\u8fd8\u6709\u8bb8\u591a\u5176\u5b83\u7684\u526f\u4f5c\u7528\u3002<\/p>\n
        <\/span><\/a>\u4e8b\u4ef6\u5192\u6ce1\u7684\u4f8b\u5916\u60c5\u51b5<\/h3>\n
        \u5e76\u4e0d\u662f\u6240\u6709\u7684\u4e8b\u4ef6\u90fd\u4f1a\u5192\u6ce1\uff0c\u4efb\u4f55\u4e0e\u7279\u5b9a\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u4e0d\u4f1a\u5192\u6ce1\uff0c\u5982\u4e0b\u4e00\u4e9b\u4e8b\u4ef6\uff1a<\/p>\n