{"id":12011,"date":"2023-11-28T22:40:14","date_gmt":"2023-11-28T14:40:14","guid":{"rendered":"https:\/\/wx.kaifamiao.info\/?p=12011"},"modified":"2023-11-30T17:55:14","modified_gmt":"2023-11-30T09:55:14","slug":"javascript-zhong-shi-jian-liu-shi-jian-bu-huo-shi","status":"publish","type":"post","link":"http:\/\/wx.kaifamiao.info\/index.php\/2023\/11\/28\/javascript-zhong-shi-jian-liu-shi-jian-bu-huo-shi\/","title":{"rendered":"JavaScript \u4e2d\u4e8b\u4ef6\u6d41\uff1f\u4e8b\u4ef6\u6355\u83b7\uff1f\u4e8b\u4ef6\u5192\u6ce1\uff1f"},"content":{"rendered":"<p>JavaScript \u4e2d\u7684\u4e8b\u4ef6\u6d41\u63cf\u8ff0\u4e86\u4e8b\u4ef6\u4ece\u9875\u9762\u4e2d\u63a5\u6536\u5230\u7684\u987a\u5e8f\u3002\u4e8b\u4ef6\u6d41\u5305\u62ec\u4e24\u4e2a\u9636\u6bb5\uff1a\u6355\u83b7\u9636\u6bb5\u548c\u5192\u6ce1\u9636\u6bb5\u3002<\/p>\n<h3><a id=\"%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7%EF%BC%88event-capturing%EF%BC%89%EF%BC%9A\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u4e8b\u4ef6\u6355\u83b7\uff08Event Capturing\uff09\uff1a<\/h3>\n<p>\u4e8b\u4ef6\u6355\u83b7\u662f\u6307\u4e8b\u4ef6\u4ece\u9876\u5c42\u5143\u7d20\u5411\u4e0b\u4f20\u64ad\u5230\u6700\u5177\u4f53\u7684\u5143\u7d20\u7684\u8fc7\u7a0b\u3002\u5728\u6355\u83b7\u9636\u6bb5\uff0c\u4e8b\u4ef6\u9996\u5148\u5728\u6587\u6863\u7684\u9876\u5c42\u5143\u7d20\uff08\u5982 <code>window<\/code> \u5bf9\u8c61\uff09\u5f00\u59cb\uff0c\u7136\u540e\u6cbf\u7740 DOM \u6811\u5411\u4e0b\u4f20\u64ad\uff0c\u76f4\u5230\u8fbe\u5230\u89e6\u53d1\u4e8b\u4ef6\u7684\u76ee\u6807\u5143\u7d20\u3002<\/p>\n<h3><a id=\"%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%EF%BC%88event-bubbling%EF%BC%89%EF%BC%9A\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u4e8b\u4ef6\u5192\u6ce1\uff08Event Bubbling\uff09\uff1a<\/h3>\n<p>\u4e8b\u4ef6\u5192\u6ce1\u662f\u6307\u4e8b\u4ef6\u4ece\u76ee\u6807\u5143\u7d20\u5f00\u59cb\uff0c\u6cbf\u7740 DOM \u6811\u5411\u4e0a\u4f20\u64ad\u5230\u6700\u9876\u5c42\u7684\u5143\u7d20\u7684\u8fc7\u7a0b\u3002\u5728\u5192\u6ce1\u9636\u6bb5\uff0c\u4e8b\u4ef6\u4f1a\u4ece\u89e6\u53d1\u4e8b\u4ef6\u7684\u76ee\u6807\u5143\u7d20\u5f00\u59cb\uff0c\u9010\u7ea7\u5411\u4e0a\u4f20\u64ad\uff0c\u76f4\u5230\u8fbe\u5230\u6587\u6863\u7684\u9876\u5c42\u5143\u7d20\u3002<\/p>\n<h3><a id=\"%E4%BA%8B%E4%BB%B6%E6%B5%81%E7%A8%8B%E7%A4%BA%E6%84%8F%E5%9B%BE%EF%BC%9A\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u4e8b\u4ef6\u6d41\u7a0b\u793a\u610f\u56fe\uff1a<\/h3>\n<pre><code class=\"language-plain_text\">|-&gt;   (Capture)    -&gt;  |  (Target)  |  -&gt;  (Bubble)  -&gt; |\n|  Top Element        |   Element   |       Window      |\n<\/code><\/pre>\n<h3><a id=\"%E7%AE%80%E8%A6%81%E8%AF%B4%E6%98%8E%EF%BC%9A\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u7b80\u8981\u8bf4\u660e\uff1a<\/h3>\n<ul>\n<li><strong>\u4e8b\u4ef6\u6355\u83b7\u9636\u6bb5\uff1a<\/strong> \u4e8b\u4ef6\u4ece\u6700\u5916\u5c42\u7684\u5143\u7d20\u5f00\u59cb\u4f20\u64ad\uff0c\u4e00\u76f4\u4f20\u9012\u5230\u89e6\u53d1\u4e8b\u4ef6\u7684\u76ee\u6807\u5143\u7d20\u3002<\/li>\n<li><strong>\u4e8b\u4ef6\u5192\u6ce1\u9636\u6bb5\uff1a<\/strong> \u4e8b\u4ef6\u4ece\u89e6\u53d1\u4e8b\u4ef6\u7684\u76ee\u6807\u5143\u7d20\u5f00\u59cb\u5411\u4e0a\u4f20\u64ad\uff0c\u4e00\u76f4\u4f20\u9012\u5230\u6700\u5916\u5c42\u7684\u5143\u7d20\u3002<\/li>\n<\/ul>\n<p>\u5728\u5b9e\u9645\u4f7f\u7528\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7 <code>addEventListener<\/code> \u65b9\u6cd5\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u6765\u63a7\u5236\u4e8b\u4ef6\u7684\u5904\u7406\u65b9\u5f0f\uff0c\u6bd4\u5982\u6307\u5b9a <code>useCapture<\/code> \u53c2\u6570\u4e3a <code>true<\/code> \u8868\u793a\u4f7f\u7528\u6355\u83b7\u9636\u6bb5\u5904\u7406\u4e8b\u4ef6\uff0c\u4e3a <code>false<\/code> \u5219\u8868\u793a\u4f7f\u7528\u5192\u6ce1\u9636\u6bb5\u5904\u7406\u4e8b\u4ef6\uff08\u9ed8\u8ba4\u4e3a <code>false<\/code>\uff09\u3002<\/p>\n<pre><code class=\"language-javascript\">element.addEventListener('click', eventHandler, useCapture);\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript \u4e2d\u7684\u4e8b\u4ef6\u6d41\u63cf\u8ff0\u4e86\u4e8b\u4ef6\u4ece\u9875\u9762\u4e2d\u63a5\u6536\u5230\u7684\u987a\u5e8f\u3002\u4e8b\u4ef6\u6d41\u5305\u62ec\u4e24\u4e2a\u9636\u6bb5\uff1a\u6355\u83b7\u9636\u6bb5\u548c\u5192\u6ce1\u9636\u6bb5\u3002 \u4e8b\u4ef6 [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[115],"tags":[],"class_list":["post-12011","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/12011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/comments?post=12011"}],"version-history":[{"count":2,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/12011\/revisions"}],"predecessor-version":[{"id":13615,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/12011\/revisions\/13615"}],"wp:attachment":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/media?parent=12011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/categories?post=12011"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/tags?post=12011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}