{"id":914,"date":"2019-05-20T10:47:43","date_gmt":"2019-05-20T01:47:43","guid":{"rendered":"https:\/\/amati.io\/?p=914"},"modified":"2019-05-20T10:47:43","modified_gmt":"2019-05-20T01:47:43","slug":"eventlisteneroptions-passive-true","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=914","title":{"rendered":"{ passive:true } \uc758 \uc9c4\uc815\ud55c \uc758\ubbf8"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">addEventListener\ub294 \ub300\uc0c1\uc5d0 \uc9c0\uc815\ud55c \uc774\ubca4\ud2b8\uac00 \ub4e4\uc5b4\uc62c \uacbd\uc6b0 \ud638\ucd9c\ud560 \ud568\uc218\ub97c \ub4f1\ub85d\ud558\ub294 method\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud558\ub294 \uc0ac\ub78c\uc774\ub77c\uba74 \ub204\uad6c\ub098 \uc544\ub294 \uae30\ucd08\uc801\uc778 method\uc774\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc, \uacfc\uac70\uc5d0\ub294 addEventListener\uac00 \uc6f9\ube0c\ub77c\uc6b0\uc800 \ubcc4\ub85c \ub3d9\uc791\uc774 \ub2ec\ub790\uace0 \ubc84\uadf8\ub3c4 \ub9ce\uc544\uc11c jQuery \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 <code>on()<\/code>, <code>off()<\/code> method\ub85c \uac04\ub2e8\ud788 \ucc98\ub9ac\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\uc558\uc2b5\ub2c8\ub2e4. \uc9c0\uae08 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 react, vue.js \ub3c4 addEventListener\ub97c \uc9c1\uc811 \uc0ac\uc6a9\ud560 \uc77c\uc740 \ub9ce\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ub300\ud45c\uc801\uc778 method\uc774\uc9c0\ub9cc \uc758\uc678\ub85c addEventListener\ub97c \uc9c1\uc811 \uc0ac\uc6a9\ud560 \uc77c\uc740 \uc810\uc810 \uc904\uc5b4\ub4e4\uace0 \uc788\ub294 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/API\/EventTarget\/addEventListener\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"AddEventListener (opens in a new tab)\">AddEventListener<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">addEventListener\ub294 \uc138\uac1c\uc758 \uc778\uc790\ub97c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">target.addEventListener(type, listener[, options]);\ntarget.addEventListener(type, listener[, useCapture]);\ntarget.addEventListener(type, listener[, useCapture, wantsUntrusted  ]); \/\/ Gecko\/Mozilla only<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uccab\ubc88\uc9f8 \uc778\uc790\ub294 type\uc73c\ub85c target\uc5d0 \ubc18\uc751\ud560 <a rel=\"noreferrer noopener\" aria-label=\"\uc774\ubca4\ud2b8 \uc720\ud615 (opens in a new tab)\" href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/Events\" target=\"_blank\">\uc774\ubca4\ud2b8 \uc720\ud615<\/a> (\uc608. click, focus, scroll, &#8230;)\uc785\ub2c8\ub2e4. \ub450\ubc88\uc9f8 \uc778\uc790\ub294 listener \ud568\uc218\uc774\uba70 \uc9c0\uc815\ud55c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \uacbd\uc6b0 \uc2e4\ud589\ud560 \ud568\uc218 (=\uc9c0\uc815\ud55c \uc774\ubca4\ud2b8\ub97c \uc804\ub2ec\ubc1b\uc744 \ud568\uc218) \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc138\ubc88\uc9f8\uac00 \uc911\uc694\ud55c\ub370, \uc6d0\ub798\ub294 useCapture boolean \uc73c\ub85c \uc774\ubca4\ud2b8 \uc804\ub2ec \ubc29\uc2dd\uc744 capturing \ub610\ub294 bubbling \ubc29\uc2dd\uc73c\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\ub294 \uc778\uc790\uc785\ub2c8\ub2e4. [<a rel=\"noreferrer noopener\" aria-label=\"\ucc38\uc870 (opens in a new tab)\" href=\"https:\/\/javascript.info\/bubbling-and-capturing\" target=\"_blank\">\ucc38\uc870<\/a>]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Capturing : \ucd5c\uc0c1\uc704 \ubd80\ubaa8\uc5d0\uc11c target\uae4c\uc9c0 \uc774\ubca4\ud2b8\ub97c \uc544\ub798\ub85c \uc21c\ucc28\uc801\uc73c\ub85c \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd<\/li><li>Bubbling : target\uc73c\ub85c\ubd80\ud130 \ucd5c\uc0c1\uc704 \ubd80\ubaa8\ub85c \uc774\ubca4\ud2b8\ub97c \uc62c\ub824\ubcf4\ub0b4 \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\ucc38\uace0\ub85c \uc138\ubc88\uc9f8 \uc778\uc790\ub97c false\ub85c \uc9c0\uc815\ud558\uc5ec bubbling \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud558\uace0, listener \ud568\uc218\uc5d0\uc11c <code>event.stopPropagation()<\/code> \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ubca4\ud2b8\ub97c \uc62c\ub824\ubcf4\ub0b4\ub294 \ub3d9\uc791\uc744 \ub9c9\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>event.cancelBubble = true;<\/code> \ub3c4 \uac19\uc740 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p><p>\ubcf4\ud1b5 \uc0c1\uc704 \uc694\uc18c\uc5d0 \uac19\uc740 \uc774\ubca4\ud2b8\ub85c \ub4f1\ub85d\ub41c listener \ud568\uc218\uac00 \uc788\uc744 \uacbd\uc6b0, \uc758\ub3c4\uce58 \uc54a\uac8c \uc0c1\uc704 \uc694\uc18c\uc758  listener\uac00 \uc2e4\ud589\ub418\uc9c0 \uc54a\ub3c4\ub85d \ub9c9\ub294 \uc6a9\ub3c4\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd5c\uadfc Chrome 51, Firefox 49, Safari 10(with iOS) \ubd80\ud130\ub294 \uc774 \uc138\ubc88\uc9f8 \uc778\uc790\uc5d0 useCapture \uc18d\uc131\uc744 \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ubcc0\uacbd\ub418\uc5c8\ub294\ub370 \uc774\uac83\uc774 <strong>EventListenerOptions<\/strong> \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ it's same\ndocument.addEventListener('touchstart', listener, true);\ndocument.addEventListener('touchstart', listener, { capture:true });<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"EventListenerOptions (opens in a new tab)\" href=\"https:\/\/github.com\/WICG\/EventListenerOptions\/blob\/gh-pages\/explainer.md\" target=\"_blank\">EventListenerOptions<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc18d\uc131\uc740 \ube44\uad50\uc801 \ucd5c\uadfc\uc5d0 \uc9c0\uc6d0\uc774 \uc2dc\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc9c0\uc6d0\ubc94\uc704\ub294 caniuse.com\uc744 \ud655\uc778\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/05\/passiveeventlistener-caniuse-1024x357.png\" alt=\"\" class=\"wp-image-949\"\/><figcaption>image from <a href=\"https:\/\/caniuse.com\/#feat=passive-event-listener\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/caniuse.com\/#feat=passive-event-listener<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\uc7ac EventListenerOptions\uc5d0\uc11c \uc9c0\uc6d0\ub418\ub294 \uc18d\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">document.addEventListener('touchstart', listener, {\n  capture: false,\n  once: false,\n  passive: false,\n});<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>capture : \uc774\ubca4\ud2b8 \uc804\ub2ec \ubc29\uc2dd\uc73c\ub85c capturing(<code>true<\/code>) \ub610\ub294 bubbling(<code>false<\/code>) \uc744 \uc120\ud0dd\ud568.<\/li><li>once : true\uc77c \uacbd\uc6b0 \uc774\ubca4\ud2b8\ub97c \ud55c\ubc88\ub9cc \ubc1b\uace0 \ud574\uc81c\ud568.<\/li><li>passive : true\uc77c \uacbd\uc6b0 \uc774\ubca4\ud2b8\uc5d0 \uc758\ud574 \uc2a4\ud06c\ub864\uc774 \ube14\ub7ed\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud568.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc138\ubc88\uc9f8 \uac1d\uccb4\ub294 \ub300\ubd80\ubd84 &#8220;\ubaa8\ubc14\uc77c \ub514\ubc14\uc774\uc2a4\uc758 \ubd80\ub4dc\ub7ec\uc6b4 \uc2a4\ud06c\ub864&#8221; \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub2e4 \ubcf4\uba74 \uc811\ud558\uac8c \ub429\ub2c8\ub2e4. \uc2a4\ud06c\ub864\uc5d0 \uad00\ub828\ub41c \uc131\ub2a5 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub2e4\ubcf4\uba74, addEventListener\ub85c \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud560 \ub54c\uc5d0 <code>{ passive:true }<\/code> \ub97c \uc9c0\uc815\ud574\uc11c \uc2a4\ud06c\ub864 \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ucf30\ub2e4\ub294 \uc544\ud2f0\ud074\uc744 \ub9ce\uc774 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0\ub370, passive \uc18d\uc131\uc774 \uc758\ubbf8\ud558\ub294 \ubc14\ub294 \ubb34\uc5c7\uc778\uc9c0, \uc65c \uc2a4\ud06c\ub864 \uc131\ub2a5\uacfc \uad00\uacc4\uac00 \uc788\ub294\uc9c0 \uad81\uae08\ud574\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Inside modern web browser&#8230;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\ud06c\ub86c\uc774\ub098 \ud30c\uc774\uc5b4\ud3ed\uc2a4 \uac19\uc740 \ucd5c\uadfc\uc758 \ube0c\ub77c\uc6b0\uc800\ub294 \ube0c\ub77c\uc6b0\uc800 \ub0b4\ubd80\uc5d0 \uc5ec\ub7ec\uac00\uc9c0 \ud504\ub85c\uc138\uc2a4\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ub124\ud2b8\uc6cc\ud06c, \ube0c\ub77c\uc6b0\uc800, UI, GPU, \ud50c\ub7ec\uadf8\uc778, \ub80c\ub354\ub7ec \ub4f1&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud06c\ub86c\uc744 \uc608\ub97c \ub4e4\uba74 <strong>\ub80c\ub354\ub7ec \ud504\ub85c\uc138\uc2a4<\/strong>\uac00 \ud0ed \ub0b4\uc758 \uc6f9 \ucf58\ud150\uce20\ub97c \ucc98\ub9ac\ud558\uac8c \ub418\ub294\ub370\uc694, \ub80c\ub354\ub7ec \ud504\ub85c\uc138\uc2a4 \ub0b4\ubd80\uc5d0\uc11c\ub3c4 \uc6f9 \ucf58\ud150\uce20 \ucc98\ub9ac\ub97c \uc704\ud55c \ud558\uc704 \uc2a4\ub808\ub4dc\ub4e4\uc774 \ub3cc\uac8c \ub429\ub2c8\ub2e4. main, worker, compositor, raster, &#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/05\/renderer.png\" alt=\"\" class=\"wp-image-942\"\/><figcaption>image from <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part3\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Inside look at modern web browser (part 3) (opens in a new tab)\">Inside look at modern web browser (part 3)<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ub80c\ub354\ub7ec \ud504\ub85c\uc138\uc2a4\uac00 \ud654\uba74\uc744 \uadf8\ub9ac\ub294 \uacfc\uc815\uc740 \ub2e4\uc74c \ud30c\uc774\ud504\ub77c\uc778\uc744 \ub530\ub985\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/amati.io\/wp-content\/uploads\/2019\/05\/frame-full.jpg?fit=620%2C94&amp;ssl=1\" alt=\"\" class=\"wp-image-943\"\/><figcaption>image from <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/?hl=ko\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"\ub80c\ub354\ub9c1 \uc131\ub2a5 (opens in a new tab)\">\ub80c\ub354\ub9c1 \uc131\ub2a5<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0\uc11c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud55c \ud6c4 layout, paint\ub97c \uac70\uccd0 <strong>Layout tree<\/strong>\ub97c \uc0dd\uc131\ud55c \ud6c4 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uc5d0 \ub118\uae30\uac8c \ub429\ub2c8\ub2e4. \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\ub294 \ub118\uaca8\ubc1b\uc740 Layout tree\uc5d0 \ub530\ub77c composite\ub97c \uc218\ud589\ud558\uc5ec \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uadf8\ub9ac\uac8c \ub418\uc9c0\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989 \uc704\uc758 \ub80c\ub354\ub9c1 \ud30c\uc774\ud504\ub77c\uc778 \uc911 &#8220;Javascript ~ Paint&#8221; \uae4c\uc9c0\ub294 \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0\uc11c \ucc98\ub9ac\ud558\uace0 &#8220;Composite&#8221;\ub294 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uc5d0\uc11c \ucc98\ub9ac\ud558\uac8c \ub429\ub2c8\ub2e4. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0 \uad00\uc2ec\uc774 \uc788\ub294 \ubd84\ub4e4\uc740 \uc544\ub9c8 <span style=\"color:#0693e3\" class=\"tadv-color\">reflow, repaint<\/span>\uc5d0 \ub300\ud55c \uac83\uc744 \uc54c\uace0 \uacc4\uc2e4 \uac81\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud654\uba74\uc758 \ub808\uc774\uc544\uc6c3\uc5d0 \uc601\ud5a5\uc744 \uc8fc\ub294 \uc18d\uc131\uc774 \ubcc0\uacbd\ub420 \uacbd\uc6b0 \uc704 \ud30c\uc774\ud504\ub77c\uc778\uc744 \ubaa8\ub450 \uc218\ud589\ud558\ub294 <strong>reflow<\/strong>\uac00 \ubc1c\uc0dd\ud558\uace0, \uc0c9\uc0c1\uc774\ub098 \uc774\ubbf8\uc9c0 \ub4f1 paint\uc5d0 \uad00\uacc4\ub418\ub294 \uc18d\uc131\ub9cc \ubcc0\uacbd\ub420 \uacbd\uc6b0 Paint\ubd80\ud130 Composite\uae4c\uc9c0 \uc218\ud589\ud558\ub294 <strong>repaint<\/strong>\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9cc\uc57d \ub808\uc774\uc544\uc6c3\uc774\ub098 \ud398\uc778\ud2b8\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0 \uc54a\ub294 \uacbd\uc6b0 reflow, repaint \ubaa8\ub450 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uace0 Composite \uc791\uc5c5\ub9cc \uc218\ud589\ud558\uba74 \ub418\ub294\ub370, \uc774\ub54c\uc5d4 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uac00 \uba54\uc778 \uc2a4\ub808\ub4dc\uc758 \ucc98\ub9ac\ub97c \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 \ubc14\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc131\ub2a5\uc774 \ub9e4\uc6b0 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>javascript\uc5d0\uc11c CSS \uc18d\uc131\uc744 \ubcc0\uacbd\ud558\uac8c \ub418\uba74 layout, paint, composite \uc911 \uc5b4\ub290 \ud55c \uc791\uc5c5\ubd80\ud130 \ud30c\uc774\ud504\ub77c\uc778\uc744 \ub530\ub77c \ucc98\ub9ac\ub97c \ud558\uac8c \ub429\ub2c8\ub2e4.<\/p><p>\ucc38\uace0\ub85c, CSS \uc18d\uc131\uc740 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc758 \uc870\ud569\uc5d0 \ub530\ub77c \uc2dc\uc791\ub418\ub294 \ud30c\uc774\ud504\ub77c\uc778 \ub2e8\uacc4\uac00 \ubaa8\ub450 \ub2e4\ub978\ub370\uc694, \uc774\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uace0 \uc2f6\ub2e4\uba74 <a rel=\"noreferrer noopener\" aria-label=\"csstriggers.com (opens in a new tab)\" href=\"https:\/\/csstriggers.com\/\" target=\"_blank\">csstriggers.com<\/a> \uc744 \ucc38\uc870\ud558\uc138\uc694.<\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">{ passive:true } \uc758 \uc9c4\uc815\ud55c \uc758\ubbf8<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 <code>addEventListener()<\/code>\ub97c \ud1b5\ud574 \ub4f1\ub85d\ub41c \uc774\ubca4\ud2b8\ub294 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uac00 \ubc1b\uc2b5\ub2c8\ub2e4. \uc774\ubca4\ud2b8\uac00 \ub4e4\uc5b4\uc624\uba74 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\ub294 \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0 \uc774\ubca4\ud2b8\ub97c \ub118\uae30\uace0 \ub80c\ub354\ub9c1 \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \ub530\ub77c layout, paint\ub97c \uac70\uccd0 Layout tree\ub97c \uae30\ub2e4\ub9ac\ub294 \uac83\uc774 \uc6d0\ub798\uc758 \ub3d9\uc791\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">EventListenerOptions \uc758 \uc18d\uc131 \uc911 passive \uc18d\uc131\uc774 \ubc14\ub85c \uc774 \ud30c\uc774\ud504\ub77c\uc778\uacfc \uad00\uacc4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>{ passive:true }<\/code> \uc758 \uc9c4\uc815\ud55c \uc758\ubbf8\ub294 <strong><span style=\"color:#cf2e2e\" class=\"tadv-color\">\uc774\ubca4\ud2b8\ub97c \ubc1b\ub294 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uc5d0 \ud574\ub2f9 \uc774\ubca4\ud2b8\uac00 \uba54\uc778 \uc2a4\ub808\ub4dc\uc758 \ucc98\ub9ac\ub97c \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 \ubc14\ub85c Composite\ub97c \uc218\ud589\ud574\ub3c4 \ub41c\ub2e4\ub294 \ud78c\ud2b8\ub97c \uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4.<\/span><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc18d\uc131\uc774 \uc124\uc815\ub418\uba74 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\ub294 \uc6d0\ub798\uc758 \ub3d9\uc791\ub300\ub85c \uc774\ubca4\ud2b8\ub97c \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0 \ub118\uae30\uae30\ub294 \ud558\uc9c0\ub9cc, \ucc98\ub9ac\ub97c \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 \ubc14\ub85c Composite\ub97c \uc218\ud589\ud569\ub2c8\ub2e4. \uc989, \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8\ub97c \ubc1b\uc544 \uc0c8 \ud504\ub808\uc784\uc744 \ubc14\ub85c \ud569\uc131\ud560 \uc218 \uc788\ub2e4\ub294 \uc758\ubbf8\uc774\uace0, \uacb0\uacfc\uc801\uc73c\ub85c \uc2a4\ud06c\ub864 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub418\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2a4\ud06c\ub864 \uc131\ub2a5 \ud5a5\uc0c1\uc744 \uc704\ud574 <code>{ passive:true }<\/code> \uc18d\uc131\uc744 \uc0ac\uc6a9\ud560 \uacbd\uc6b0 <code>e.preventDefault()<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\ub2e4\ub294 \uc544\ud2f0\ud074\ub3c4 \uc790\uc8fc \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">document.addEventListener('touchmove', (e) => {\n  e.preventDefault();\n  \/\/ Do something...\n},\n  { passive: true }\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc704\uc640 \uac19\uc740 \ucf54\ub4dc\ub294 touchmove \uc774\ubca4\ud2b8\ub85c \ub2e4\ub978 \ub3d9\uc791\uc744 \uc218\ud589\ud558\uae30 \uc704\ud55c \ubaa9\uc801\uc744 \uac00\uc9c0\uace0 \uc788\ub294\ub370\uc694, \uc2e4\uc81c\ub85c \ud06c\ub86c\uc5d0\uc11c \uc2e4\ud589\ud574 \ubcf4\uba74 \uc544\ub798 \ud654\uba74\uacfc \uac19\uc774 \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud558\uace0 \uc2e4\uc81c\ub85c \uc774\ubca4\ud2b8\uac00 \ub9c9\uc544\uc9c0\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/amati.io\/wp-content\/uploads\/2019\/05\/passive-true-error.png?fit=620%2C148&amp;ssl=1\" alt=\"\" class=\"wp-image-946\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8 \uc774\uc720\ub294 <code>{ passive:true }<\/code> \ud78c\ud2b8\ub97c \ud1b5\ud574 \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uac00 \uba54\uc778 \uc2a4\ub808\ub4dc\uc758 \ucc98\ub9ac\ub97c \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 \ubc14\ub85c \ud569\uc131\ud574\uc57c \ud558\ub294\ub370, listener \ud568\uc218\uc5d0 \uc788\ub294 <code>e.preventDefault()<\/code>\ub294 \uc2a4\ud06c\ub864\uc744 \ub9c9\uace0 \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0\uc11c \ucc98\ub9ac\ub97c \ud574\uc57c\ud558\ub294 \uba54\uc18c\ub4dc\uc774\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\ucc38\uace0\ub85c <code>e.preventDefault()<\/code>\ub294 target\uc758 \uae30\ubcf8 \ub3d9\uc791\uc744 \ub9c9\ub294 \uba54\uc18c\ub4dc\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 target\uc774 <code>&lt;a&gt;<\/code> \ud0dc\uadf8\uc778 \uacbd\uc6b0 href \uc18d\uc131\uc5d0 \uc758\ud55c \uae30\ubcf8 \ub3d9\uc791\uc740 \ub9c9\ud788\uac8c \ub418\uace0 event\uc5d0 \ub300\ud55c listener \ud568\uc218\ub9cc \uc2e4\ud589\ub418\uac8c \ub429\ub2c8\ub2e4.<\/p><p>\ubcf4\ud1b5 <code>&lt;a&gt;<\/code> \ud0dc\uadf8\ub97c <code>&lt;button&gt;<\/code>\ud0dc\uadf8\ucc98\ub7fc \ub3d9\uc791\ud558\uac8c \ud558\uae30 \uc704\ud55c \ubaa9\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\uace4 \ud569\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c e.preventDefault()\ub97c \ud1b5\ud574 \uc774\ubca4\ud2b8\ub97c \ub9c9\uc744 \ud544\uc694\uac00 \uc788\ub2e4\uba74 passive \uc18d\uc131\uc740 \uaf2d false\uac00 \ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">EventListenerOptions feature detection<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">EventListenerOptions\ub294 \ube44\uad50\uc801 \ucd5c\uadfc\uc5d0 \uc9c0\uc6d0\uc774 \uc2dc\uc791\ub418\uc5c8\uc73c\ubbc0\ub85c, feature detection\uc744 \ud1b5\ud574 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \uac04\ub2e8\ud558\uac8c <a rel=\"noreferrer noopener\" aria-label=\"Modenizr (opens in a new tab)\" href=\"https:\/\/modernizr.com\/docs\" target=\"_blank\">Modenizr<\/a>\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\ub3c4 \uc788\uc2b5\ub2c8\ub2e4\ub9cc, \uacf5\uc2dd \ubb38\uc11c\uc5d0\ub3c4 \uc18c\uac1c\ub41c \ub2e4\uc74c \ud568\uc218\ub85c\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Test via a getter in the options object to see if the passive property is accessed\nvar supportsPassive = false;\ntry {\n  var opts = Object.defineProperty({}, 'passive', {\n    get: function() {\n      supportsPassive = true;\n    }\n  });\n  window.addEventListener(\"testPassive\", null, opts);\n  window.removeEventListener(\"testPassive\", null, opts);\n} catch (e) {}\n\n\/\/ Use our detect's results. passive applied if supported, capture will be false either way.\nelem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false); <\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Chrome 55+\uc758 \ubcc0\uacbd\uc0ac\ud56d<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">EventListenerOptions\uac00 \ucc98\uc74c \ub3c4\uc785\ub418\uc5c8\uc744 \ub54c\uc5d0 passive \uc758 \uae30\ubcf8\uac12\uc740 \ubaa8\ub4e0 \uc774\ubca4\ud2b8\uc5d0 \ub300\ud574\uc11c passive \uc18d\uc131\uc740 false \uc600\uae30 \ub54c\ubb38\uc5d0 e.preventDefault() \uc5d0\uc11c \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc77c\uc740 \uc5c6\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc <a rel=\"noreferrer noopener\" aria-label=\"Chrome 55+, Firefox 61+\ubd80\ud130 \ud2b9\uc815 \uc0c1\ud669\uc758 passive \uc18d\uc131\uc758 \uae30\ubcf8\uac12\uc774 \ubcc0\uacbd (opens in a new tab)\" href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/API\/EventTarget\/addEventListener#passive_%EB%A6%AC%EC%8A%A4%EB%84%88%EB%A1%9C_%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81_%EC%84%B1%EB%8A%A5_%ED%96%A5%EC%83%81\" target=\"_blank\">Chrome 55+, Firefox 61+\ubd80\ud130 \ud2b9\uc815 \uc0c1\ud669\uc758 passive \uc18d\uc131\uc758 \uae30\ubcf8\uac12\uc774 \ubcc0\uacbd<\/a>\ub418\uc5c8\uc2b5\ub2c8\ub2e4. <span style=\"color:#0693e3\" class=\"tadv-color\">window, document, document.body\ub97c \ub300\uc0c1\uc73c\ub85c \ud55c touchstart, touchmove<\/span> \uc5d0 \ub300\ud574\uc11c\ub294 passive \uc18d\uc131\uc758 default\ub294 true\ub85c \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \ubcc0\uacbd\uc740 Chrome(android), Firefox\ub9cc \ud574\ub2f9\ub418\uae30 \ub54c\ubb38\uc5d0 iOS\uc5d0\uc11c\ub294 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub294\ub370\uc694&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uc9c0\uae08\uc740 EventListenerOptions\uc758 \uc9c0\uc6d0\uc0c1\ud669\uc774 \ub2e4\ub974\uace0 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c passive \uc18d\uc131\uc758 \uae30\ubcf8\uac12\ub3c4 \ub2e4\ub978 \uc0c1\ud669\uc774\uae30 \ub54c\ubb38\uc5d0 \uaf2d feature detection\uc744 \ud558\uc5ec <code>{ passive:false }<\/code> \ub85c \uc801\uc6a9\ud558\uac70\ub098, e.preventDefault()\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub3c4\ub85d \ud574\uc57c\ud569\ub2c8\ub2e4. \uc704\uc5d0\uc11c \uc5b8\uae09\ud588\ub4ef\uc774 passive \uc18d\uc131\uc744 false\ub85c \uc870\uc808\ud560 \uacbd\uc6b0 \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c e.preventDefault()\ub97c \uaf2d \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uc9c0 \uace0\ubbfc\uc774 \ud544\uc694\ud560 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc815\ub9ac<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>EventListenerOptions\ub294 Chrome 51+, Firefox 49+ \ubd80\ud130 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/li><li><code>{ passive:true }<\/code> \ub97c \uc124\uc815\ud558\uba74 \uc774\ubca4\ud2b8 \ucc98\ub9ac\uc640 \ubcc4\ub3c4\ub85c \ucef4\ud3ec\uc9c0\ud130 \uc2a4\ub808\ub4dc\uc5d0\uc11c \ubc14\ub85c composite\ub97c \uc218\ud589\ud558\uae30 \ub54c\ubb38\uc5d0, \uc2a4\ud06c\ub864 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub41c\ub2e4.<\/li><li><code>{\bpassive:true }<\/code> \ub97c \uc124\uc815\ud560 \uacbd\uc6b0 e.preventDefault()\ub294 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\ub2e4. passive \uc18d\uc131\uc744 false\ub85c \ubcc0\uacbd\ud558\uba74 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uae30 \ub54c\ubb38\uc5d0 e.preventDefault()\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub418\ub294\uc9c0 \uac80\ud1a0\ud574\uc57c \ud55c\ub2e4.<\/li><li>Chrome 55+ \ubd80\ud130\ub294 window, document, document.body \uc758 touchstart, touchmove \uc774\ubca4\ud2b8\uc5d0 \ud55c\ud558\uc5ec <code>{ passive:true }<\/code> \uac00 default\uc774\ubbc0\ub85c e.preventDefault()\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 passive \uc18d\uc131\uc744 false\ub85c \ubcc0\uacbd\ud560 \ud544\uc694\uac00 \uc788\ub2e4.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\uc704 \ubb38\uc11c\ub97c \uc791\uc131\ud558\uba74\uc11c google developer \uc5d0 \ub4f1\ub85d\ub418\uc5c8\ub358 &#8220;Inside look at modern web browser&#8221; \uc2dc\ub9ac\uc988\uac00 \ub3c4\uc6c0\uc774 \ub9ce\uc774 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ucd5c\uadfc\uc758 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub4e4\uc774 \uc5b4\ub5a4 \ub2e8\uacc4\ub97c \uac70\uccd0 \ub80c\ub354\ub9c1\uc744 \ud558\ub294\uc9c0 \uc54c\ub824\uc8fc\uace0 \uc131\ub2a5 \ud5a5\uc0c1\uc744 \uc704\ud574 \uac1c\ubc1c\uc790\uac00 \uc2dc\ub3c4\ud560 \uc218 \uc788\ub294 \uc88b\uc740 \ud301\ub3c4 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 1 - CPU, GPU, \uba54\ubaa8\ub9ac \uadf8\ub9ac\uace0 \ub2e4\uc911 \ud504\ub85c\uc138\uc2a4 \uc544\ud0a4\ud14d\ucc98 (opens in a new tab)\" href=\"https:\/\/d2.naver.com\/helloworld\/2922312\" target=\"_blank\">\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 1 &#8211; CPU, GPU, \uba54\ubaa8\ub9ac \uadf8\ub9ac\uace0 \ub2e4\uc911 \ud504\ub85c\uc138\uc2a4 \uc544\ud0a4\ud14d\ucc98<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 2 - \ub0b4\ube44\uac8c\uc774\uc158 \uacfc\uc815\uc5d0\uc11c \uc77c\uc5b4\ub098\ub294 \uc77c (opens in a new tab)\" href=\"https:\/\/d2.naver.com\/helloworld\/9274593\" target=\"_blank\">\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 2 &#8211; \ub0b4\ube44\uac8c\uc774\uc158 \uacfc\uc815\uc5d0\uc11c \uc77c\uc5b4\ub098\ub294 \uc77c<\/a><\/li><li><a href=\"https:\/\/d2.naver.com\/helloworld\/5237120\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 3 - \ub80c\ub354\ub7ec \ud504\ub85c\uc138\uc2a4\uc758 \ub0b4\ubd80 \ub3d9\uc791 (opens in a new tab)\">\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 3 &#8211; \ub80c\ub354\ub7ec \ud504\ub85c\uc138\uc2a4\uc758 \ub0b4\ubd80 \ub3d9\uc791<\/a><\/li><li><a href=\"https:\/\/d2.naver.com\/helloworld\/6204533\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 4 - \ucef4\ud3ec\uc9c0\ud130\uac00 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ubc1b\uc558\uc744 \ub54c (opens in a new tab)\">\ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\uc758 \ub0b4\ubd80 \uc0b4\ud3b4\ubcf4\uae30 4 &#8211; \ucef4\ud3ec\uc9c0\ud130\uac00 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ubc1b\uc558\uc744 \ub54c<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>addEventListener\ub294 \ub300\uc0c1\uc5d0 \uc9c0\uc815\ud55c \uc774\ubca4\ud2b8\uac00 \ub4e4\uc5b4\uc62c \uacbd\uc6b0 \ud638\ucd9c\ud560 \ud568\uc218\ub97c \ub4f1\ub85d\ud558\ub294 method\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud558\ub294 \uc0ac\ub78c\uc774\ub77c\uba74 \ub204\uad6c\ub098 \uc544\ub294 \uae30\ucd08\uc801\uc778 method\uc774\uc8e0. \ud558\uc9c0\ub9cc, \uacfc\uac70\uc5d0\ub294 addEventListener\uac00 \uc6f9\ube0c\ub77c\uc6b0\uc800 \ubcc4\ub85c \ub3d9\uc791\uc774 \ub2ec\ub790\uace0 \ubc84\uadf8\ub3c4 \ub9ce\uc544\uc11c jQuery \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 on(), off() method\ub85c \uac04\ub2e8\ud788 \ucc98\ub9ac\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\uc558\uc2b5\ub2c8\ub2e4. \uc9c0\uae08 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 react, vue.js \ub3c4 addEventListener\ub97c \uc9c1\uc811 \uc0ac\uc6a9\ud560 \uc77c\uc740 \ub9ce\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ub300\ud45c\uc801\uc778 method\uc774\uc9c0\ub9cc \uc758\uc678\ub85c addEventListener\ub97c \uc9c1\uc811 \uc0ac\uc6a9\ud560 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[26,60,101,107,115],"class_list":["post-914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-addeventlistener","tag-eventlisteneroptions","tag-passive","tag-preventdefault","tag-stoppropagation"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=914"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/914\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}