new Map([

[

    {},

    "<div class=\"ds-message _63c77b1\" style=\"--panel-width: 0px;\"><div class=\"_74c0879\" style=\"--collapsible-area-title-height: 38px; --group-title-sticky-top: 0px;\"><div class=\"_245c867\"><div class=\"_5ab5d64\"><div class=\"ds-icon _970ac5e\" style=\"font-size: 16px; width: 16px; height: 16px;\"></div><span class=\"_5255ff8 _4d41763\">已思考（用时 5 秒）</span><div class=\"ds-icon\" style=\"font-size: 14px; width: 14px; height: 14px;\"></div></div><div class=\"c99b79f8\" style=\"opacity: 0;\"></div></div><div class=\"c2b72bb8\"></div><div class=\"e1675d8b ds-think-content _767406f\"><div class=\"ddd26891 _9b52f6c\" style=\"width: 16px; height: 16px;\"><div class=\"a510c7ce _0652043\"></div></div><div class=\"_9ecc93a\"></div><div class=\"ds-markdown\" style=\"--ds-md-zoom: 1.143;\"><p class=\"ds-markdown-paragraph\"><span>我们假设我们有一个页面，其中有一个复制按钮，其HTML结构如你所示。</span><br><span>我们需要测试获取这个按钮的点击事件。</span><br><span>这里我们使用事件委托的方法，监听整个文档的点击事件，然后检查点击的元素是否是我们的复制按钮。</span><br><span>如果点击了复制按钮，我们执行复制操作，并给出反馈。</span></p><p class=\"ds-markdown-paragraph\"><span>注意：由于按钮可能有多个，我们通过类名和按钮内的文本来识别。</span></p><p class=\"ds-markdown-paragraph\"><span>我们将编写一个简单的测试页面，包含一个复制按钮和一个代码块，然后测试点击事件。</span></p><p class=\"ds-markdown-paragraph\"><span>由于我们无法直接运行DOM环境，这里提供一个HTML文件，你可以在浏览器中打开并测试。</span></p></div></div><div class=\"_8f7678d\"></div></div><div class=\"ds-markdown\" style=\"--ds-md-zoom: 1.143;\"><p class=\"ds-markdown-paragraph\"><span>我来创建一个完整的测试页面，让你可以测试复制按钮的点击事件：</span></p><div class=\"md-code-block md-code-block-light\"><div class=\"md-code-block-banner-wrap\"><div class=\"md-code-block-banner md-code-block-banner-lite\"><div class=\"_121d384\"><div class=\"d2a24f03\"><span class=\"d813de27\">html</span></div><div class=\"d2a24f03 _246a029\"><div class=\"efa13877\"><button role=\"button\" aria-disabled=\"false\" class=\"ds-atom-button ds-text-button ds-text-button--with-icon\" style=\"margin-right: 4px;\"><div class=\"ds-icon ds-atom-button__icon\" style=\"font-size: 16px; width: 16px; height: 16px; margin-right: 3px;\"></div><span><span class=\"code-info-button-text\">复制</span></span><div class=\"ds-focus-ring\"></div></button><button role=\"button\" aria-disabled=\"false\" class=\"ds-atom-button ds-text-button ds-text-button--with-icon\"><div class=\"ds-icon ds-atom-button__icon\" style=\"font-size: 16px; width: 16px; height: 16px; margin-right: 3px;\"></div><span><span class=\"code-info-button-text\">下载</span></span><div class=\"ds-focus-ring\"></div></button><div class=\"ae809fef\"></div><button role=\"button\" aria-disabled=\"false\" class=\"ds-atom-button ds-text-button ds-text-button--with-icon\"><div class=\"ds-icon ds-atom-button__icon\" style=\"font-size: 16px; width: 16px; height: 16px; margin-right: 3px;\"></div><span><span class=\"code-info-button-text\">运行</span></span><div class=\"ds-focus-ring\"></div></button></div></div></div></div></div><pre><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>zh-CN<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>title</span><span class=\"token punctuation\">&gt;</span></span>复制按钮事件测试<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>title</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 20px;\n            line-height: 1.6;\n        }\n        \n        .code-container {\n            background: #f5f5f5;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            padding: 15px;\n            margin: 20px 0;\n            position: relative;\n        }\n        \n        .code-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 10px;\n            padding-bottom: 10px;\n            border-bottom: 1px solid #ddd;\n        }\n        \n        .code-language {\n            color: #666;\n            font-size: 14px;\n        }\n        \n        pre {\n            margin: 0;\n            padding: 10px;\n            background: #fff;\n            border-radius: 3px;\n            overflow-x: auto;\n        }\n        \n        .ds-atom-button {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 6px 12px;\n            font-size: 14px;\n            border: 1px solid #ddd;\n            background: #fff;\n            color: #333;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n        \n        .ds-atom-button:hover {\n            background: #f9f9f9;\n            border-color: #ccc;\n        }\n        \n        .ds-atom-button[aria-disabled=\"true\"] {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n        \n        .ds-icon {\n            margin-right: 4px;\n        }\n        \n        .test-controls {\n            background: #e9f7fe;\n            padding: 15px;\n            border-radius: 4px;\n            margin: 20px 0;\n        }\n        \n        .event-log {\n            background: #f8f9fa;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            padding: 15px;\n            margin-top: 20px;\n            max-height: 300px;\n            overflow-y: auto;\n            font-family: monospace;\n            font-size: 12px;\n        }\n        \n        .log-entry {\n            margin-bottom: 5px;\n            padding-bottom: 5px;\n            border-bottom: 1px solid #eee;\n        }\n        \n        .log-time {\n            color: #666;\n            margin-right: 10px;\n        }\n        \n        .log-message {\n            color: #333;\n        }\n        \n        .success {\n            color: #28a745;\n        }\n        \n        .error {\n            color: #dc3545;\n        }\n        \n        .info {\n            color: #17a2b8;\n        }\n        \n        button {\n            margin: 5px;\n            padding: 8px 16px;\n            border: 1px solid #007bff;\n            background: #007bff;\n            color: white;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        \n        button:hover {\n            background: #0056b3;\n            border-color: #0056b3;\n        }\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">&gt;</span></span>复制按钮事件测试<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">&gt;</span></span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>test-controls<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h3</span><span class=\"token punctuation\">&gt;</span></span>测试控制<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h3</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token special-attr\"><span class=\"token attr-name\">onclick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value javascript language-javascript\"><span class=\"token function\">enableAllButtons</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">&gt;</span></span>启用所有按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token special-attr\"><span class=\"token attr-name\">onclick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value javascript language-javascript\"><span class=\"token function\">disableAllButtons</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">&gt;</span></span>禁用所有按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token special-attr\"><span class=\"token attr-name\">onclick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value javascript language-javascript\"><span class=\"token function\">addDynamicButton</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">&gt;</span></span>动态添加按钮<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token special-attr\"><span class=\"token attr-name\">onclick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value javascript language-javascript\"><span class=\"token function\">clearLog</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">&gt;</span></span>清空日志<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token special-attr\"><span class=\"token attr-name\">onclick</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token value javascript language-javascript\"><span class=\"token function\">testClipboardAPI</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></span><span class=\"token punctuation\">\"</span></span></span><span class=\"token punctuation\">&gt;</span></span>测试Clipboard API<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-container<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-header<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-language<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>JavaScript<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-actions<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>button<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">aria-disabled</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>false<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>ds-atom-button ds-text-button ds-text-button--with-icon<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>margin-right: 4px;<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>ds-icon ds-atom-button__icon<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">style</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>font-size: 16px; width: 16px; height: 16px; margin-right: 3px;<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>svg</span> <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">height</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">viewBox</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0 0 16 16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>none<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">xmlns</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2000/svg<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>path</span> <span class=\"token attr-name\">d</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>M6.14923 4.02032C7.11191 4.02032 7.87977 4.02017 8.49591 4.07599C9.12122 4.1327 9.65786 4.25188 10.1414 4.53107C10.7201 4.8653 11.2008 5.34591 11.535 5.92462C11.8142 6.40818 11.9333 6.94482 11.9901 7.57013C12.0459 8.18625 12.0457 8.9542 12.0457 9.91681C12.0457 10.8795 12.0459 11.6474 11.9901 12.2635C11.9333 12.8888 11.8142 13.4254 11.535 13.909C11.2008 14.4877 10.7201 14.9683 10.1414 15.3026C9.65786 15.5817 9.12122 15.7009 8.49591 15.7576C7.87977 15.8134 7.1119 15.8133 6.14923 15.8133C5.18661 15.8133 4.41868 15.8134 3.80255 15.7576C3.17724 15.7009 2.6406 15.5817 2.15704 15.3026C1.57834 14.9684 1.09772 14.4877 0.763489 13.909C0.484305 13.4254 0.365123 12.8888 0.308411 12.2635C0.252587 11.6474 0.252747 10.8795 0.252747 9.91681C0.252747 8.95419 0.252603 8.18625 0.308411 7.57013C0.365123 6.94482 0.484305 6.40818 0.763489 5.92462C1.09771 5.3459 1.57833 4.86529 2.15704 4.53107C2.6406 4.25188 3.17724 4.1327 3.80255 4.07599C4.41868 4.02018 5.1866 4.02032 6.14923 4.02032ZM6.14923 5.37775C5.16175 5.37775 4.46628 5.37761 3.9256 5.42657C3.39428 5.47473 3.07853 5.56574 2.83575 5.70587C2.46313 5.92106 2.15348 6.23071 1.93829 6.60333C1.79817 6.84611 1.70715 7.16185 1.659 7.69318C1.61004 8.23385 1.61017 8.92934 1.61017 9.91681C1.61017 10.9043 1.61002 11.5998 1.659 12.1404C1.70715 12.6717 1.79817 12.9875 1.93829 13.2303C2.15349 13.6029 2.46315 13.9126 2.83575 14.1277C3.07853 14.2679 3.39428 14.3589 3.9256 14.407C4.46628 14.456 5.16176 14.4559 6.14923 14.4559C7.13675 14.4559 7.83218 14.456 8.37286 14.407C8.90419 14.3589 9.21993 14.2679 9.46271 14.1277C9.83529 13.9126 10.145 13.6029 10.3602 13.2303C10.5003 12.9875 10.5913 12.6718 10.6395 12.1404C10.6884 11.5998 10.6883 10.9043 10.6883 9.91681C10.6883 8.92935 10.6884 8.23385 10.6395 7.69318C10.5913 7.16185 10.5003 6.84611 10.3602 6.60333C10.145 6.23072 9.8353 5.92107 9.46271 5.70587C9.21993 5.56574 8.90418 5.47473 8.37286 5.42657C7.83218 5.3776 7.13676 5.37775 6.14923 5.37775ZM9.80157 0.367981C10.7637 0.367981 11.5313 0.367886 12.1473 0.423645C12.7725 0.480313 13.3093 0.598765 13.7928 0.877747C14.3716 1.21192 14.852 1.69355 15.1863 2.27228C15.4655 2.75575 15.5857 3.29165 15.6424 3.91681C15.6982 4.53301 15.6971 5.30161 15.6971 6.26447V7.8299C15.6971 8.29265 15.6989 8.58994 15.6649 8.84845C15.4667 10.3525 14.4009 11.5738 12.9832 11.9988V10.5467C13.6973 10.1903 14.2104 9.49662 14.3192 8.67169C14.3387 8.52348 14.3406 8.3358 14.3406 7.8299V6.26447C14.3406 5.27707 14.3398 4.58149 14.2908 4.04083C14.2427 3.50969 14.1526 3.19373 14.0125 2.95099C13.7974 2.5785 13.4875 2.2687 13.1151 2.05353C12.8723 1.91347 12.5563 1.82237 12.0252 1.77423C11.4846 1.72528 10.7888 1.7254 9.80157 1.7254H7.71466C6.75614 1.72559 5.92659 2.27697 5.52325 3.07892H4.07013C4.54215 1.51132 5.99314 0.368192 7.71466 0.367981H9.80157Z<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>currentColor<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>path</span><span class=\"token punctuation\">&gt;</span></span>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>svg</span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-info-button-text<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>复制<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>pre</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>code</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-content<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>// 这是要复制的代码示例\nfunction exampleFunction() {\n    console.log('Hello, World!');\n    return '测试代码';\n}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>code</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>pre</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-container<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-header<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-language<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>Python<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-actions<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>button<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">aria-disabled</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>false<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>ds-atom-button ds-text-button ds-text-button--with-icon<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>ds-icon ds-atom-button__icon<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>svg</span> <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">height</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">viewBox</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0 0 16 16<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>none<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">xmlns</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://www.w3.org/2000/svg<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n                            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>path</span> <span class=\"token attr-name\">d</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>M6.14923 4.02032C7.11191 4.02032 7.87977 4.02017 8.49591 4.07599C9.12122 4.1327 9.65786 4.25188 10.1414 4.53107C10.7201 4.8653 11.2008 5.34591 11.535 5.92462C11.8142 6.40818 11.9333 6.94482 11.9901 7.57013C12.0459 8.18625 12.0457 8.9542 12.0457 9.91681C12.0457 10.8795 12.0459 11.6474 11.9901 12.2635C11.9333 12.8888 11.8142 13.4254 11.535 13.909C11.2008 14.4877 10.7201 14.9683 10.1414 15.3026C9.65786 15.5817 9.12122 15.7009 8.49591 15.7576C7.87977 15.8134 7.1119 15.8133 6.14923 15.8133C5.18661 15.8133 4.41868 15.8134 3.80255 15.7576C3.17724 15.7009 2.6406 15.5817 2.15704 15.3026C1.57834 14.9684 1.09772 14.4877 0.763489 13.909C0.484305 13.4254 0.365123 12.8888 0.308411 12.2635C0.252587 11.6474 0.252747 10.8795 0.252747 9.91681C0.252747 8.95419 0.252603 8.18625 0.308411 7.57013C0.365123 6.94482 0.484305 6.40818 0.763489 5.92462C1.09771 5.3459 1.57833 4.86529 2.15704 4.53107C2.6406 4.25188 3.17724 4.1327 3.80255 4.07599C4.41868 4.02018 5.1866 4.02032 6.14923 4.02032ZM6.14923 5.37775C5.16175 5.37775 4.46628 5.37761 3.9256 5.42657C3.39428 5.47473 3.07853 5.56574 2.83575 5.70587C2.46313 5.92106 2.15348 6.23071 1.93829 6.60333C1.79817 6.84611 1.70715 7.16185 1.659 7.69318C1.61004 8.23385 1.61017 8.92934 1.61017 9.91681C1.61017 10.9043 1.61002 11.5998 1.659 12.1404C1.70715 12.6717 1.79817 12.9875 1.93829 13.2303C2.15349 13.6029 2.46315 13.9126 2.83575 14.1277C3.07853 14.2679 3.39428 14.3589 3.9256 14.407C4.46628 14.456 5.16176 14.4559 6.14923 14.4559C7.13675 14.4559 7.83218 14.456 8.37286 14.407C8.90419 14.3589 9.21993 14.2679 9.46271 14.1277C9.83529 13.9126 10.145 13.6029 10.3602 13.2303C10.5003 12.9875 10.5913 12.6718 10.6395 12.1404C10.6884 11.5998 10.6883 10.9043 10.6883 9.91681C10.6883 8.92935 10.6884 8.23385 10.6395 7.69318C10.5913 7.16185 10.5003 6.84611 10.3602 6.60333C10.145 6.23072 9.8353 5.92107 9.46271 5.70587C9.21993 5.56574 8.90418 5.47473 8.37286 5.42657C7.83218 5.3776 7.13676 5.37775 6.14923 5.37775ZM9.80157 0.367981C10.7637 0.367981 11.5313 0.367886 12.1473 0.423645C12.7725 0.480313 13.3093 0.598765 13.7928 0.877747C14.3716 1.21192 14.852 1.69355 15.1863 2.27228C15.4655 2.75575 15.5857 3.29165 15.6424 3.91681C15.6982 4.53301 15.6971 5.30161 15.6971 6.26447V7.8299C15.6971 8.29265 15.6989 8.58994 15.6649 8.84845C15.4667 10.3525 14.4009 11.5738 12.9832 11.9988V10.5467C13.6973 10.1903 14.2104 9.49662 14.3192 8.67169C14.3387 8.52348 14.3406 8.3358 14.3406 7.8299V6.26447C14.3406 5.27707 14.3398 4.58149 14.2908 4.04083C14.2427 3.50969 14.1526 3.19373 14.0125 2.95099C13.7974 2.5785 13.4875 2.2687 13.1151 2.05353C12.8723 1.91347 12.5563 1.82237 12.0252 1.77423C11.4846 1.72528 10.7888 1.7254 9.80157 1.7254H7.71466C6.75614 1.72559 5.92659 2.27697 5.52325 3.07892H4.07013C4.54215 1.51132 5.99314 0.368192 7.71466 0.367981H9.80157Z<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>currentColor<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>path</span><span class=\"token punctuation\">&gt;</span></span>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>svg</span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>code-info-button-text<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>复制<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">&gt;</span></span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>pre</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>code</span><span class=\"token punctuation\">&gt;</span></span># Python示例代码\ndef hello_world():\n    print(\"Hello, World!\")\n    return \"Python测试\"<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>code</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>pre</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h3</span><span class=\"token punctuation\">&gt;</span></span>事件日志<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h3</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>event-log<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>event-log<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>log-entry<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>log-time<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">&gt;</span></span>等待事件...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token script\"><span class=\"token language-javascript\">\n        <span class=\"token comment\">// 事件日志系统</span>\n        <span class=\"token keyword\">const</span> eventLog <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'event-log'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        \n        <span class=\"token keyword\">function</span> <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span>message<span class=\"token punctuation\">,</span> type <span class=\"token operator\">=</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> time <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Date</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toLocaleTimeString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> logEntry <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            logEntry<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">log-entry </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>type<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n            logEntry<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">&lt;span class=\"log-time\"&gt;</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>time<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">&lt;/span&gt; &lt;span class=\"log-message\"&gt;</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>message<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">&lt;/span&gt;</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n            eventLog<span class=\"token punctuation\">.</span><span class=\"token function\">prepend</span><span class=\"token punctuation\">(</span>logEntry<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            \n            <span class=\"token comment\">// 限制日志数量</span>\n            <span class=\"token keyword\">const</span> entries <span class=\"token operator\">=</span> eventLog<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.log-entry'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>entries<span class=\"token punctuation\">.</span>length <span class=\"token operator\">&gt;</span> <span class=\"token number\">50</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                entries<span class=\"token punctuation\">[</span>entries<span class=\"token punctuation\">.</span>length <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token keyword\">function</span> <span class=\"token function\">clearLog</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            eventLog<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token string\">'&lt;div class=\"log-entry\"&gt;&lt;span class=\"log-time\"&gt;日志已清空&lt;/span&gt;&lt;/div&gt;'</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token comment\">// 方法1：事件委托（推荐）</span>\n        document<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">event</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> button <span class=\"token operator\">=</span> event<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span><span class=\"token function\">closest</span><span class=\"token punctuation\">(</span><span class=\"token string\">'button.ds-atom-button'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            \n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>button<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token comment\">// 检查是否是复制按钮</span>\n                <span class=\"token keyword\">const</span> buttonText <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.code-info-button-text'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>buttonText <span class=\"token operator\">&amp;&amp;</span> buttonText<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">===</span> <span class=\"token string\">'复制'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">捕获到复制按钮点击事件 (事件委托)</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    \n                    <span class=\"token comment\">// 检查按钮状态</span>\n                    <span class=\"token keyword\">const</span> isDisabled <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span><span class=\"token function\">getAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aria-disabled'</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">===</span> <span class=\"token string\">'true'</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>isDisabled<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'按钮已被禁用，点击无效'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                        <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span>\n                    \n                    <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">按钮状态: aria-disabled=\"</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>button<span class=\"token punctuation\">.</span><span class=\"token function\">getAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aria-disabled'</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">\"</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">按钮类名: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>button<span class=\"token punctuation\">.</span>className<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    \n                    <span class=\"token comment\">// 获取要复制的代码</span>\n                    <span class=\"token keyword\">const</span> codeBlock <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span><span class=\"token function\">closest</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.code-container'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pre code'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>codeBlock<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token keyword\">const</span> codeToCopy <span class=\"token operator\">=</span> codeBlock<span class=\"token punctuation\">.</span>textContent<span class=\"token punctuation\">;</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">找到代码块，内容长度: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>codeToCopy<span class=\"token punctuation\">.</span>length<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> 字符</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                        \n                        <span class=\"token comment\">// 使用Clipboard API复制文本</span>\n                        <span class=\"token function\">copyToClipboard</span><span class=\"token punctuation\">(</span>codeToCopy<span class=\"token punctuation\">,</span> button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'未找到代码块'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        \n        <span class=\"token comment\">// 方法2：直接绑定事件监听器</span>\n        document<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'DOMContentLoaded'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> copyButtons <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'button.ds-atom-button'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            \n            copyButtons<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">button<span class=\"token punctuation\">,</span> index</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">const</span> buttonText <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.code-info-button-text'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>buttonText <span class=\"token operator\">&amp;&amp;</span> buttonText<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">===</span> <span class=\"token string\">'复制'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token comment\">// 移除可能存在的旧监听器，防止重复</span>\n                    button<span class=\"token punctuation\">.</span>_clickHandler <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span>_clickHandler <span class=\"token operator\">||</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">event</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">捕获到复制按钮点击事件 (直接绑定 - 按钮</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>index <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">)</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                        event<span class=\"token punctuation\">.</span><span class=\"token function\">stopPropagation</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 阻止冒泡，避免重复触发</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n                    \n                    <span class=\"token comment\">// 添加新监听器</span>\n                    button<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> button<span class=\"token punctuation\">.</span>_clickHandler<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        \n        <span class=\"token comment\">// 复制到剪贴板函数</span>\n        <span class=\"token keyword\">function</span> <span class=\"token function\">copyToClipboard</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">text<span class=\"token punctuation\">,</span> button</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>navigator<span class=\"token punctuation\">.</span>clipboard <span class=\"token operator\">&amp;&amp;</span> window<span class=\"token punctuation\">.</span>isSecureContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token comment\">// 使用现代Clipboard API</span>\n                navigator<span class=\"token punctuation\">.</span>clipboard<span class=\"token punctuation\">.</span><span class=\"token function\">writeText</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span>\n                    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'复制成功 (Clipboard API)'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                        <span class=\"token function\">showCopySuccessFeedback</span><span class=\"token punctuation\">(</span>button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n                    <span class=\"token punctuation\">.</span><span class=\"token function\">catch</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">err</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">Clipboard API复制失败: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>err<span class=\"token punctuation\">.</span>message<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                        <span class=\"token comment\">// 降级方案</span>\n                        <span class=\"token function\">fallbackCopyToClipboard</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">,</span> button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token comment\">// 降级方案</span>\n                <span class=\"token function\">fallbackCopyToClipboard</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">,</span> button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token comment\">// 降级复制方案</span>\n        <span class=\"token keyword\">function</span> <span class=\"token function\">fallbackCopyToClipboard</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">text<span class=\"token punctuation\">,</span> button</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> textArea <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'textarea'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            textArea<span class=\"token punctuation\">.</span>value <span class=\"token operator\">=</span> text<span class=\"token punctuation\">;</span>\n            textArea<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>position <span class=\"token operator\">=</span> <span class=\"token string\">'fixed'</span><span class=\"token punctuation\">;</span>\n            textArea<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">;</span>\n            \n            document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>textArea<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            textArea<span class=\"token punctuation\">.</span><span class=\"token function\">focus</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            textArea<span class=\"token punctuation\">.</span><span class=\"token function\">select</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            \n            <span class=\"token keyword\">try</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">const</span> successful <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">execCommand</span><span class=\"token punctuation\">(</span><span class=\"token string\">'copy'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>successful<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'复制成功 (execCommand)'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token function\">showCopySuccessFeedback</span><span class=\"token punctuation\">(</span>button<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'复制失败 (execCommand)'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span> <span class=\"token keyword\">catch</span> <span class=\"token punctuation\">(</span>err<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">复制失败: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>err<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n            \n            document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">removeChild</span><span class=\"token punctuation\">(</span>textArea<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token comment\">// 显示复制成功反馈</span>\n        <span class=\"token keyword\">function</span> <span class=\"token function\">showCopySuccessFeedback</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">button</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> originalText <span class=\"token operator\">=</span> button<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.code-info-button-text'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>originalText<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">const</span> originalTextContent <span class=\"token operator\">=</span> originalText<span class=\"token punctuation\">.</span>textContent<span class=\"token punctuation\">;</span>\n                originalText<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> <span class=\"token string\">'已复制'</span><span class=\"token punctuation\">;</span>\n                originalText<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>color <span class=\"token operator\">=</span> <span class=\"token string\">'#28a745'</span><span class=\"token punctuation\">;</span>\n                originalText<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>fontWeight <span class=\"token operator\">=</span> <span class=\"token string\">'bold'</span><span class=\"token punctuation\">;</span>\n                \n                <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                    originalText<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> originalTextContent<span class=\"token punctuation\">;</span>\n                    originalText<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>color <span class=\"token operator\">=</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span>\n                    originalText<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>fontWeight <span class=\"token operator\">=</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token comment\">// 控制函数</span>\n        <span class=\"token keyword\">function</span> <span class=\"token function\">enableAllButtons</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> buttons <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'button.ds-atom-button'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            buttons<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">button</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                button<span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aria-disabled'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'false'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                button<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">;</span>\n                button<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>cursor <span class=\"token operator\">=</span> <span class=\"token string\">'pointer'</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'已启用所有复制按钮'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token keyword\">function</span> <span class=\"token function\">disableAllButtons</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> buttons <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'button.ds-atom-button'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            buttons<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">button</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                button<span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aria-disabled'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'true'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                button<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token string\">'0.5'</span><span class=\"token punctuation\">;</span>\n                button<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>cursor <span class=\"token operator\">=</span> <span class=\"token string\">'not-allowed'</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'已禁用所有复制按钮'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token keyword\">function</span> <span class=\"token function\">addDynamicButton</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> newCodeContainer <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            newCodeContainer<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'code-container'</span><span class=\"token punctuation\">;</span>\n            newCodeContainer<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n                &lt;div class=\"code-header\"&gt;\n                    &lt;div class=\"code-language\"&gt;HTML (动态添加)&lt;/div&gt;\n                    &lt;div class=\"code-actions\"&gt;\n                        &lt;button role=\"button\" aria-disabled=\"false\" class=\"ds-atom-button ds-text-button ds-text-button--with-icon\"&gt;\n                            &lt;div class=\"ds-icon ds-atom-button__icon\"&gt;\n                                &lt;svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"&gt;\n                                    &lt;path d=\"M6.14923 4.02032C7.11191 4.02032 7.87977 4.02017 8.49591 4.07599C9.12122 4.1327 9.65786 4.25188 10.1414 4.53107C10.7201 4.8653 11.2008 5.34591 11.535 5.92462C11.8142 6.40818 11.9333 6.94482 11.9901 7.57013C12.0459 8.18625 12.0457 8.9542 12.0457 9.91681C12.0457 10.8795 12.0459 11.6474 11.9901 12.2635C11.9333 12.8888 11.8142 13.4254 11.535 13.909C11.2008 14.4877 10.7201 14.9683 10.1414 15.3026C9.65786 15.5817 9.12122 15.7009 8.49591 15.7576C7.87977 15.8134 7.1119 15.8133 6.14923 15.8133C5.18661 15.8133 4.41868 15.8134 3.80255 15.7576C3.17724 15.7009 2.6406 15.5817 2.15704 15.3026C1.57834 14.9684 1.09772 14.4877 0.763489 13.909C0.484305 13.4254 0.365123 12.8888 0.308411 12.2635C0.252587 11.6474 0.252747 10.8795 0.252747 9.91681C0.252747 8.95419 0.252603 8.18625 0.308411 7.57013C0.365123 6.94482 0.484305 6.40818 0.763489 5.92462C1.09771 5.3459 1.57833 4.86529 2.15704 4.53107C2.6406 4.25188 3.17724 4.1327 3.80255 4.07599C4.41868 4.02018 5.1866 4.02032 6.14923 4.02032ZM6.14923 5.37775C5.16175 5.37775 4.46628 5.37761 3.9256 5.42657C3.39428 5.47473 3.07853 5.56574 2.83575 5.70587C2.46313 5.92106 2.15348 6.23071 1.93829 6.60333C1.79817 6.84611 1.70715 7.16185 1.659 7.69318C1.61004 8.23385 1.61017 8.92934 1.61017 9.91681C1.61017 10.9043 1.61002 11.5998 1.659 12.1404C1.70715 12.6717 1.79817 12.9875 1.93829 13.2303C2.15349 13.6029 2.46315 13.9126 2.83575 14.1277C3.07853 14.2679 3.39428 14.3589 3.9256 14.407C4.46628 14.456 5.16176 14.4559 6.14923 14.4559C7.13675 14.4559 7.83218 14.456 8.37286 14.407C8.90419 14.3589 9.21993 14.2679 9.46271 14.1277C9.83529 13.9126 10.145 13.6029 10.3602 13.2303C10.5003 12.9875 10.5913 12.6718 10.6395 12.1404C10.6884 11.5998 10.6883 10.9043 10.6883 9.91681C10.6883 8.92935 10.6884 8.23385 10.6395 7.69318C10.5913 7.16185 10.5003 6.84611 10.3602 6.60333C10.145 6.23072 9.8353 5.92107 9.46271 5.70587C9.21993 5.56574 8.90418 5.47473 8.37286 5.42657C7.83218 5.3776 7.13676 5.37775 6.14923 5.37775ZM9.80157 0.367981C10.7637 0.367981 11.5313 0.367886 12.1473 0.423645C12.7725 0.480313 13.3093 0.598765 13.7928 0.877747C14.3716 1.21192 14.852 1.69355 15.1863 2.27228C15.4655 2.75575 15.5857 3.29165 15.6424 3.91681C15.6982 4.53301 15.6971 5.30161 15.6971 6.26447V7.8299C15.6971 8.29265 15.6989 8.58994 15.6649 8.84845C15.4667 10.3525 14.4009 11.5738 12.9832 11.9988V10.5467C13.6973 10.1903 14.2104 9.49662 14.3192 8.67169C14.3387 8.52348 14.3406 8.3358 14.3406 7.8299V6.26447C14.3406 5.27707 14.3398 4.58149 14.2908 4.04083C14.2427 3.50969 14.1526 3.19373 14.0125 2.95099C13.7974 2.5785 13.4875 2.2687 13.1151 2.05353C12.8723 1.91347 12.5563 1.82237 12.0252 1.77423C11.4846 1.72528 10.7888 1.7254 9.80157 1.7254H7.71466C6.75614 1.72559 5.92659 2.27697 5.52325 3.07892H4.07013C4.54215 1.51132 5.99314 0.368192 7.71466 0.367981H9.80157Z\" fill=\"currentColor\"&gt;&lt;/path&gt;\n                                &lt;/svg&gt;\n                            &lt;/div&gt;\n                            &lt;span&gt;&lt;span class=\"code-info-button-text\"&gt;复制&lt;/span&gt;&lt;/span&gt;\n                        &lt;/button&gt;\n                    &lt;/div&gt;\n                &lt;/div&gt;\n                &lt;pre&gt;&lt;code&gt;&amp;lt;!-- 动态添加的HTML代码示例 --&amp;gt;\n&amp;lt;div class=\"dynamic-example\"&amp;gt;\n    &amp;lt;p&amp;gt;这是动态添加的代码块&amp;lt;/p&amp;gt;\n&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;\n            </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n            \n            document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.event-log'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">insertAdjacentElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'beforebegin'</span><span class=\"token punctuation\">,</span> newCodeContainer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'已动态添加新的代码块和复制按钮'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token keyword\">function</span> <span class=\"token function\">testClipboardAPI</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>navigator<span class=\"token punctuation\">.</span>clipboard <span class=\"token operator\">&amp;&amp;</span> window<span class=\"token punctuation\">.</span>isSecureContext<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Clipboard API 可用'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                navigator<span class=\"token punctuation\">.</span>clipboard<span class=\"token punctuation\">.</span><span class=\"token function\">writeText</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Clipboard API 测试文本'</span><span class=\"token punctuation\">)</span>\n                    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'测试文本复制成功'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'success'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n                    <span class=\"token punctuation\">.</span><span class=\"token function\">catch</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">err</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">测试文本复制失败: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>err<span class=\"token punctuation\">.</span>message<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> <span class=\"token string\">'error'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Clipboard API 不可用，将使用降级方案'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n        \n        <span class=\"token comment\">// 初始化日志</span>\n        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'页面加载完成，可以点击复制按钮进行测试'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token function\">logEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'事件监听器已启动：1. 事件委托 2. 直接绑定'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'info'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">&gt;</span></span></pre></div><h2><span>测试说明：</span></h2><ol start=\"1\"><li><p class=\"ds-markdown-paragraph\"><strong><span>保存文件</span></strong><span>：将上面的代码保存为 </span><code>copy-button-test.html</code></p></li><li><p class=\"ds-markdown-paragraph\"><strong><span>打开测试</span></strong><span>：</span></p><ul><li><p class=\"ds-markdown-paragraph\"><span>在浏览器中打开该文件</span></p></li><li><p class=\"ds-markdown-paragraph\"><span>你会看到两个代码块，每个都有一个\"复制\"按钮</span></p></li></ul></li><li><p class=\"ds-markdown-paragraph\"><strong><span>测试功能</span></strong><span>：</span></p><ul><li><p class=\"ds-markdown-paragraph\"><strong><span>点击复制按钮</span></strong><span>：尝试点击任意一个\"复制\"按钮</span></p></li><li><p class=\"ds-markdown-paragraph\"><strong><span>查看事件日志</span></strong><span>：底部会显示事件捕获的详细信息</span></p></li><li><p class=\"ds-markdown-paragraph\"><strong><span>测试控制按钮</span></strong><span>：</span></p><ul><li><p class=\"ds-markdown-paragraph\"><span>\"启用所有按钮\" / \"禁用所有按钮\"：测试按钮状态变化</span></p></li><li><p class=\"ds-markdown-paragraph\"><span>\"动态添加按钮\"：测试事件委托对动态添加按钮的效果</span></p></li><li><p class=\"ds-markdown-paragraph\"><span>\"清空日志\"：清空事件日志</span></p></li><li><p class=\"ds-markdown-paragraph\"><span>\"测试Clipboard API\"：检查浏览器Clipboard API是否可用</span></p></li></ul></li></ul></li><li><p class=\"ds-markdown-paragraph\"><strong><span>观察结果</span></strong><span>：</span></p><ul><li><p class=\"ds-markdown-paragraph\"><span>点击按钮后，日志会显示：</span></p><ul><li><p class=\"ds-markdown-paragraph\"><span>事件捕获方式（事件委托/直接绑定）</span></p></li><li><p class=\"ds-markdown-paragraph\"><span>按钮</span></p></li></ul></li></ul></li></ol></div></div><div class=\"ds-theme\" style=\"--ds-rgb-hover: 245 245 245; --ds-rgb-primary: 77 107 254; --ds-button-hover-color: #2563EB; --ds-bordered-secondary-button-color: var(--dsr-text-1); --ds-input-prefix-color: var(--dsr-text-1);\"></div><div class=\"ds-flex _0a3d93b\" style=\"align-items: center; gap: 10px;\"><div class=\"ds-flex _965abe9 _54866f7\" style=\"align-items: center; gap: 10px;\"><div class=\"db183363 ds-icon-button ds-icon-button--m ds-icon-button--sizing-container\" tabindex=\"0\" role=\"button\" aria-disabled=\"false\"><div class=\"ds-icon-button__hover-bg\"></div><div class=\"ds-icon\"></div><div class=\"ds-focus-ring\"></div></div><div class=\"db183363 ds-icon-button ds-icon-button--m ds-icon-button--sizing-container\" tabindex=\"0\" role=\"button\" aria-disabled=\"false\"><div class=\"ds-icon-button__hover-bg\"></div><div class=\"ds-icon\"></div><div class=\"ds-focus-ring\"></div></div><div class=\"db183363 ds-icon-button ds-icon-button--m ds-icon-button--sizing-container\" tabindex=\"0\" role=\"button\" aria-disabled=\"false\"><div class=\"ds-icon-button__hover-bg\"></div><div class=\"ds-icon\"></div><div class=\"ds-focus-ring\"></div></div><div class=\"db183363 ds-icon-button ds-icon-button--m ds-icon-button--sizing-container\" tabindex=\"0\" role=\"button\" aria-disabled=\"false\"><div class=\"ds-icon-button__hover-bg\"></div><div class=\"ds-icon\"></div><div class=\"ds-focus-ring\"></div></div><div class=\"db183363 ds-icon-button ds-icon-button--m ds-icon-button--sizing-container\" tabindex=\"0\" role=\"button\" aria-disabled=\"false\"><div class=\"ds-icon-button__hover-bg\"></div><div class=\"ds-icon\"></div><div class=\"ds-focus-ring\"></div></div></div><div style=\"flex: 1 1 0%;\"></div><button role=\"button\" aria-disabled=\"false\" class=\"ds-atom-button ds-basic-button ds-basic-button--outlined\" style=\"padding: 5px 14px; font-size: 13px; line-height: 20px;\"><span>继续生成</span><div class=\"ds-focus-ring\"></div></button></div>"

]

])