{"id":968,"date":"2022-04-11T00:11:49","date_gmt":"2022-04-10T15:11:49","guid":{"rendered":"http:\/\/160.251.208.217\/?p=968"},"modified":"2023-12-03T01:28:03","modified_gmt":"2023-12-02T16:28:03","slug":"js-event-test","status":"publish","type":"post","link":"https:\/\/it-dxblog.com\/blog\/js-event-test\/","title":{"rendered":"\u3010JavaScript\u3011addEventListener\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u529b\u6280\u3067\u8abf\u3079\u308b"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u30de\u30a6\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u3084\u3001\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b\u3057\u305f\u6642\u306a\u3069\u3001<strong>\u30a4\u30d9\u30f3\u30c8<\/strong>\u304c\u767a\u751f\u3057\u305f\u6642\u306b\u51e6\u7406\u3092\u884c\u3044\u305f\u3044\u3068\u3044\u3063\u305f\u3053\u3068\u306f\u3088\u304f\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002\u305d\u306e\u969b\u306b<strong>addEventListener<\/strong>\u3092\u4f7f\u3063\u3066<strong>\u30a4\u30d9\u30f3\u30c8\u306b\u51e6\u7406\u3092\u767b\u9332<\/strong>\u3059\u308b\u3053\u3068\u306f\u3088\u304f\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002\u304c\u3001\u306a\u3093\u3067\u3053\u306e\u30a4\u30d9\u30f3\u30c8\u3082\u767a\u751f\u3057\u3066\u3044\u308b\u306e\uff1f\u601d\u3063\u3066\u3044\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3068\u9055\u3046\uff01\u3068\u3044\u3046\u3088\u3046\u306a\u3053\u3068\u304c\u3042\u3063\u305f\u305f\u3081\u3001\u5b9f\u88c5\u524d\u306b<strong>\u529b\u6280<\/strong>\u3067\u8abf\u3079\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u305d\u306e\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br>\u3068\u3044\u3063\u3066\u3082\u305f\u3044\u3057\u305f\u65b9\u6cd5\u3067\u306f\u306a\u304f\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u305f\u3044\u8981\u7d20\u306b\u3001<strong>\u4f7f\u3044\u305f\u3044\u30a4\u30d9\u30f3\u30c8\u3092\u5168\u3066\u767b\u9332<\/strong>\u3057\u3066\u8abf\u3079\u308b\u3068\u3044\u3046\u529b\u6280\u3067\u3059\u3002\u30a4\u30d9\u30f3\u30c8\u306b\u306f\u3001\u30a4\u30d9\u30f3\u30c8\u540d\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u767b\u9332\u3057\u307e\u3059\u3002<br><\/p>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-0\"><span class=\"sgb-heading__inner sgb-heading--type3 with-icon\" style=\"background-color:var(--sgb-main-color);border-color:transparent;font-size:1.2em\"><i class=\"fa fa-chevron-circle-right\" style=\"color:#b4e0fa\"><\/i><span class=\"sgb-heading__text\" style=\"color:whitesmoke\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3059\u308b\u8981\u7d20\u3092\u6e96\u5099\u3057\u307e\u3059\u3002<br>background-color\u306f\u306a\u304f\u3066\u3082\u3088\u3044\u306e\u3067\u3059\u304c\u3001\u80cc\u666f\u8272\u3092\u3064\u3051\u3066\u304a\u3044\u305f\u307b\u3046\u304c\u3001\u3044\u308d\u3044\u308d\u8a66\u3059\u3068\u304d\u306b\u5206\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002\u307e\u305f\u3001\u4eca\u56de\u306fdiv\u8981\u7d20\u306b\u3057\u3066\u307e\u3059\u304c\u3001input\u8981\u7d20\u306a\u3069<strong>\u8abf\u3079\u305f\u3044\u8981\u7d20<\/strong>\u306b\u9069\u5b9c\u5909\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"<div id=&quot;event_test&quot; style=&quot;background-color: skyblue;&quot;>test<\/div>&#8221; style=&#8221;color:#d8dee9ff;display:none&#8221; aria-label=&#8221;Copy&#8221; class=&#8221;code-block-pro-copy-button&#8221;><svg style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">event_test<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">background-color: skyblue;<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">test<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f15\u6570\uff1aevent_name\u3067\u6307\u5b9a\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u306b\u3001<strong>event_name\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3059\u308b<\/strong>\u95a2\u6570\u3092\u767b\u9332\u3059\u308bsetEvent\u95a2\u6570\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<strong>getElementById<\/strong>\u306b\u306f\u3001<strong>\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3059\u308b\u8981\u7d20\u3092\u6307\u5b9a<\/strong>\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"function setEvent(event_name) {\n  document.querySelector(&quot;#event_test&quot;).addEventListener(\n    event_name,\n    function () {\n      console.log(event_name);\n    },\n    false\n  );\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">event_name<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">#event_test<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">event_name<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">event_name<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u3088\u3046\u306b<strong>\u5f15\u6570\uff1a\u201dclick\u201d<\/strong>\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8981\u7d20\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b<strong>\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u201dclick\u201d<\/strong>\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"setEvent(&quot;click&quot;);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"116\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/image-4.png\" alt=\"\" class=\"wp-image-971\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-4.png 445w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-4-300x78.png 300w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u9023\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">sample.html<\/span><span role=\"button\" tabindex=\"0\" data-code=\"<!DOCTYPE html>\n\n<html>\n  <head>\n    <meta charset=&quot;utf-8&quot; \/>\n  <\/head>\n  <body>\n    <!-- \u30a4\u30d9\u30f3\u30c8\u767b\u9332\u7528\u306e\u8981\u7d20 -->\n    <div id=&quot;event_test&quot; style=&quot;background-color: skyblue&quot;>test<\/div>\n\n    <script>\n      \/\/ event_name\u3067\u6307\u5b9a\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u306b\u3001event_name\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u767b\u9332\u3059\u308b\n      function setEvent(event_name) {\n        document.querySelector(&quot;#event_test&quot;).addEventListener(\n          event_name,\n          () => {\n            console.log(event_name);\n          },\n          false\n        );\n      }\n      setEvent(&quot;click&quot;);\n    <\/script>\n  <\/body>\n<\/html>\n&#8221; style=&#8221;color:#d8dee9ff;display:none&#8221; aria-label=&#8221;Copy&#8221; class=&#8221;code-block-pro-copy-button&#8221;><svg style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">utf-8<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &lt;!-- \u30a4\u30d9\u30f3\u30c8\u767b\u9332\u7528\u306e\u8981\u7d20 --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">event_test<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">background-color: skyblue<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">test<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      \/\/ event_name\u3067\u6307\u5b9a\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u306b\u3001event_name\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u767b\u9332\u3059\u308b<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      function setEvent(event_name) <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">#event_test<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #D8DEE9\">event_name<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">event_name<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      setEvent(\"click\");<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-1\"><span class=\"sgb-heading__inner sgb-heading--type3 with-icon\" style=\"background-color:var(--sgb-main-color);border-color:transparent;font-size:1.2em\"><i class=\"fa fa-chevron-circle-right\" style=\"color:#b4e0fa\"><\/i><span class=\"sgb-heading__text\" style=\"color:whitesmoke\">\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u8abf\u3079\u3066\u307f\u308b<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u304f\u4f7f\u3046\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\u3002<br>\u3053\u3061\u3089\u3092\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u3001\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n<div id=\"id-33ca5c27-7494-4a63-8f2f-9c89d89a150f\">\n<figure class=\"wp-block-table aligncenter is-style-stripes\"><table><thead><tr><th>\u30a4\u30d9\u30f3\u30c8\u540d<\/th><th>\u5185\u5bb9<\/th><\/tr><\/thead><tbody><tr><td>click<\/td><td>\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d<\/td><\/tr><tr><td>mousedown<\/td><td>\u30de\u30a6\u30b9\u306e\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u3068\u304d<\/td><\/tr><tr><td>mouseup<\/td><td>\u30de\u30a6\u30b9\u306e\u30dc\u30bf\u30f3\u3092\u96e2\u3057\u305f\u3068\u304d<\/td><\/tr><tr><td>mouseover<\/td><td>\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u8981\u7d20\u306b\u5165\u3063\u305f\u3068\u304d<\/td><\/tr><tr><td>mousemove<\/td><td>\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u8981\u7d20\u5185\u3067\u52d5\u3044\u3066\u3044\u308b\u3068\u304d<\/td><\/tr><tr><td>mouseout <\/td><td>\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u8981\u7d20\u306e\u5916\u306b\u51fa\u305f\u3068\u304d<\/td><\/tr><tr><td>dblclick<\/td><td>\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d<\/td><\/tr><tr><td>contextmenu<\/td><td>\u53f3\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3093\u306a\u611f\u3058\u3067\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3059\u3002\u529b\u6280\u3067\u3059\u306dw<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"setEvent(&quot;click&quot;);\nsetEvent(&quot;mousedown&quot;);\nsetEvent(&quot;mouseup&quot;);\nsetEvent(&quot;mouseover&quot;);\nsetEvent(&quot;mousemove&quot;);\nsetEvent(&quot;mouseout&quot;);\nsetEvent(&quot;dblclick&quot;);\nsetEvent(&quot;contextmenu&quot;);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" \/><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">mousedown<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">mouseup<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">mouseover<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">mousemove<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">mouseout<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">dblclick<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">setEvent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">contextmenu<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><span class=\"keiko_red\">\u8981\u7d20\u306e\u4e0a\u3067<\/span>\u30af\u30ea\u30c3\u30af<\/strong>\u3059\u308b\u3068\u6b21\u306e\u3088\u3046\u306b\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<br>click\u304c\u767a\u751f\u3059\u308b\u524d\u306b\u3001<strong>mousedown<\/strong>\u3068<strong>mouseup<\/strong>\u304c\u767a\u751f\u3057\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"188\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/image-6.png\" alt=\"\" class=\"wp-image-974\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-6.png 450w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-6-300x125.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d9a\u3044\u3066\u3001\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3067\u3059\u3002<br><strong>mousedown<\/strong>\u21d2<strong>mouseup\u21d2click<\/strong>\u304c<strong>2\u56de\u7e70\u308a\u8fd4\u3055\u308c\u305f\u5f8c\u306b\u3001dblclick\u304c\u767a\u751f<\/strong>\u3057\u3066\u3044\u307e\u3059\u3002<br>\u3053\u3053\u306f\u610f\u8b58\u3057\u3066\u304a\u304b\u306a\u3044\u3068\u3001\u601d\u3063\u3066\u3044\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3068\u9055\u3046\u3068\u3044\u3063\u305f\u3053\u3068\u304c\u8d77\u3053\u308a\u305d\u3046\u3067\u3059\u306d\u3002<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"252\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/image-7.png\" alt=\"\" class=\"wp-image-975\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-7.png 448w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-7-300x169.png 300w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u5ea6\u306f<strong>\u53f3\u30af\u30ea\u30c3\u30af<\/strong>\u3067\u3059\u3002<br><strong>contextmenu\u304c\u767a\u751f\u3059\u308b\u524d<\/strong>\u306b\u3001click\u30a4\u30d9\u30f3\u30c8\u540c\u69d8\u3001<strong>mousedown<\/strong>\u3068<strong>mouseup<\/strong>\u304c\u767a\u751f\u3059\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"447\" height=\"186\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/image-5.png\" alt=\"\" class=\"wp-image-973\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-5.png 447w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-5-300x125.png 300w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30de\u30a6\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u3084\u3001\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b\u3057\u305f\u6642\u306a\u3069\u3001\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u6642\u306b\u51e6\u7406\u3092\u884c\u3044\u305f\u3044\u3068\u3044\u3063\u305f\u3053\u3068\u306f\u3088\u304f\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002\u305d\u306e\u969b\u306baddEventListener\u3092\u4f7f\u3063\u3066\u30a4\u30d9\u30f3\u30c8\u306b\u51e6\u7406\u3092\u767b\u9332\u3059\u308b\u3053\u3068\u306f\u3088\u304f\u3042\u308b\u3068\u601d &#8230; <\/p>\n","protected":false},"author":1,"featured_media":2086,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[8],"tags":[],"class_list":["post-968","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","entry"],"_links":{"self":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/comments?post=968"}],"version-history":[{"count":4,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/968\/revisions"}],"predecessor-version":[{"id":2709,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/968\/revisions\/2709"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media\/2086"}],"wp:attachment":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media?parent=968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/categories?post=968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/tags?post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}