{"id":4528,"date":"2013-04-07T23:22:47","date_gmt":"2013-04-07T14:22:47","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4528"},"modified":"2013-04-07T23:22:47","modified_gmt":"2013-04-07T14:22:47","slug":"javascript-addeventlistener-%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e4%bc%9d%e6%92%ad","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4528","title":{"rendered":"Javascript addEventListener \u30a4\u30d9\u30f3\u30c8\u4f1d\u64ad"},"content":{"rendered":"<p>Javascript\u3092\u7528\u3044\u305f\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3UI\u3084\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3092\u5236\u4f5c\u3057\u3066\u3044\u304f\u969b\u3001\u30bf\u30c3\u30c1\u30b9\u30bf\u30fc\u30c8\u306e\u30a4\u30d9\u30f3\u30c8\u3060\u3063\u305f\u308a\u3001\u30bf\u30c3\u30c1\u30e0\u30fc\u30d6\u306e\u30a4\u30d9\u30f3\u30c8\u3060\u3063\u305f\u308a\u3068\u3001dom\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8272\u3005\u3068\u767b\u9332\u3057\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u751f\u3055\u305b\u3066\u3044\u304f\u304b\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u969b\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3059\u308b\u70ba\u306e\u95a2\u6570\u3001addEventListener\u3092\u7528\u3044\u3066\u30a4\u30d9\u30f3\u30c8\u3092\u6301\u305f\u305b\u3066\u3044\u304f\u306e\u3067\u3059\u304c\u3001a\u8981\u7d20\u306a\u3069\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3001\u4f55\u304b\u51e6\u7406\u3092\u884c\u304a\u3046\u3068\u3059\u308b\u3068\u3001\u30af\u30ea\u30c3\u30af\u3084\u30bf\u30c3\u30c1\u3092\u3059\u308b\u3068\u3001\u901a\u5e38\u306e\u52d5\u4f5c\u306e\u30ea\u30f3\u30af\u5148\u306b\u98db\u3076\u3002\u3068\u3044\u3046\u52d5\u4f5c\u306b\u306a\u3063\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u52d5\u4f5c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306b\u306f\u3001event.preeventDefault();\u3092\u7528\u3044\u3066\u3001\u901a\u5e38\u306e\u52d5\u4f5c\uff08\u30ea\u30f3\u30af\uff09\u3092\u7121\u52b9\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">event.preeventDefault();<\/pre>\n<p>\u307e\u305f\u3001\u73fe\u5728\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u6b62\u3081\u308b\u3068\u304d\u306f\u3001stopPropagation();\u3067\u306e\u3055\u3089\u306a\u308b\u4f1d\u64ad\u3092\u6b62\u3081\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">event.stopPropagation()<\/pre>\n<p>\u3055\u3042\u3001\u3053\u3053\u3067\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u3068\u306f\uff1f\u3068\u3044\u3046\u8a71\u306b\u306a\u308b\u306e\u3067\u3059\u304c\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u3068\u306fDOM\u4e0a\u3067\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u969b\u306e\u4f1d\u308f\u308a\u65b9\u3002\u3068\u3044\u3063\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>\u4e3b\u306b\u4f7f\u3046\u306e\u306f<strong>Capture\u30d5\u30a7\u30fc\u30ba<\/strong>\u3068\u3001<strong>Bubbling\u30d5\u30a7\u30fc\u30ba<\/strong>\u306e2\u7a2e\u985e\u3067\u3042\u308a\u3001\u3053\u308c\u306f\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3059\u308b\u969b\u306e<strong>addEventListener\u306e\u7b2c3\u5f15\u6570<\/strong>\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>\uff11.Capture\u30d5\u30a7\u30fc\u30ba<\/strong>\uff1a\u30eb\u30fc\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff08HTML\u3060\u3068Document\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff09\u304b\u3089\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5411\u304b\u3063\u3066\u5b50\u5b6b\u8981\u7d20\u3092\u305f\u3069\u3063\u3066\u3044\u304d\u3001\u9806\u306b\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306b\u5bfe\u3057\u51e6\u7406\u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3057\u3066\u3044\u304f\u3002<\/p>\n<p><strong>\uff12.Bubbling\u30d5\u30a7\u30fc\u30ba\uff1a<\/strong> \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u76f4\u63a5\u306e\u89aa\u8981\u7d20\u304b\u3089\u3001\u305d\u306e\u5b50\u5b6b\uff08\u30eb\u30fc\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5074\uff09\u306b\u5411\u304b\u3063\u3066\u305f\u3069\u3063\u3066\u3044\u304d\u3001\u9806\u306b\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306b\u5bfe\u3057\u51e6\u7406\u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3057\u3066\u3044\u304f\u3002<\/p>\n<p><strong>3.Target\u30d5\u30a7\u30fc\u30ba:<\/strong> \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4e0a\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306b\u5bfe\u3057\u51e6\u7406\u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3059\u308b\u3002<\/p>\n<p>\u56f3\u3067\u8868\u3059\u3068\u4ee5\u4e0b\u306e\u69d8\u306a\u611f\u3058\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ev.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ev.jpg\" title=\"ev\" width=\"404\" height=\"459\" class=\"alignnone  wp-image-4529\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ev.jpg 449w, https:\/\/www.webcyou.com\/wp-content\/uploads\/ev-264x300.jpg 264w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<p><strong>false\uff1aBubbling\u30d5\u30a7\u30fc\u30ba\u307e\u305f\u306f<strong>Target\u30d5\u30a7\u30fc\u30ba<\/strong><\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">document.getElementById(\"btn\").addEventListener(\"click\", hoge, false);<\/pre>\n<p><strong>true\uff1aCapture\u30d5\u30a7\u30fc\u30ba\uff08use Cature\uff09<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">document.getElementById(\"btn\").addEventListener(\"click\", hoge, true);<\/pre>\n<p>\u3053\u306e\u3088\u3046\u306b<strong>addEventListener\u306e\u7b2c3\u5f15\u6570\u306e<\/strong>useCapture \u3092\u00a0<code>true<\/code>\u00a0\u306b\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001Capture\u30d5\u30a7\u30fc\u30ba\u306b\u5207\u308a\u66ff\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u5f15\u6570\u306f\u5168\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u7701\u7565\u53ef\u80fd\u3067\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u7701\u7565\u3057\u305f\u5834\u5408\u306ffalse\u3068\u306a\u308a\u3001<strong>Bubbling\u30d5\u30a7\u30fc\u30ba\u3068\u306a\u308a\u307e\u3059\u3002<\/strong><\/p>\n<p>\u901a\u5e38\u3001false\u306b\u8a2d\u5b9a\u3057\u3066\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n<p>\u3068\u3044\u3046\u306e\u3082\u3001true\u3064\u307e\u308a\u3001<strong>Capture\u30d5\u30a7\u30fc\u30ba<\/strong>\u306b\u3059\u308b\u3068\u3001\u540ctype\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u305f\u8981\u7d20\u304c\u5b58\u5728\u3057\u305f\u969b\u3001\u540c\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u751f\u3055\u305b\u305f\u8981\u7d20\u306e\u89aa\u8981\u7d20\u3067\u3042\u308b\u30a4\u30d9\u30f3\u30c8\u304c\u5148\u306b\u767a\u751f\u3057\u307e\u3046\u7d50\u679c\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u8a00\u3046\u3068\u3001div\u3068p\u306bclick\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3001div\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30a2\u30e9\u30fc\u30c8\u300cdiv\u300d\u3001p\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30a2\u30e9\u30fc\u30c8\u300cp\u300d\u3092\u767a\u751f\u3002<\/p>\n<p>p\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u969b\u3001<strong>Bubbling\u30d5\u30a7\u30fc\u30ba<\/strong>\u3060\u3068\u3001p\u2192div\u3068\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u304c\u884c\u308f\u308c\u308b\u304c\u3001<\/p>\n<p><strong>Capture\u30d5\u30a7\u30fc\u30ba<\/strong>\u3060\u3068\u3001div\u2192p\u3068\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u304c\u884c\u308f\u308c\u308b\u3002<\/p>\n<p>\u3053\u306e\u4e8b\u3092\u907f\u3051\u308b\u305f\u3081\u3067\u3082\u3042\u308b\u3002<\/p>\n<p><strong>\u30c6\u30b9\u30c8<\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/event\/eventlistener.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/event\/eventlistener.html<\/a><\/p>\n<h4>stopPropagation();<\/h4>\n<p>\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u306b\u3064\u3044\u3066\u5206\u304b\u3063\u305f\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u5143\u306b\u623b\u308a\u3001stopPropagation()\u306b\u3064\u3044\u3066\u3067\u3059\u304c\u3001<\/p>\n<p>\u3053\u308c\u3089\u306e\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u3092\u4e2d\u6b62\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/evst.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/evst.png\" title=\"evst\" width=\"359\" height=\"408\" class=\"alignnone  wp-image-4530\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/evst.png 449w, https:\/\/www.webcyou.com\/wp-content\/uploads\/evst-264x300.png 264w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/a><\/p>\n<p>\u3053\u306e\u3001stopPropagation()\u3092\u5148\u7a0b\u306e\u30c6\u30b9\u30c8\u306ediv\u306b\u8ffd\u52a0\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p><strong>Bubbling\u30d5\u30a7\u30fc\u30ba<\/strong>\u3060\u3068\u3001p\u2192div\u3068\u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u884c\u308f\u308c\u3066\u3044\u307e\u3059\u304c\u3001<\/p>\n<p><strong>Capture\u30d5\u30a7\u30fc\u30ba<\/strong>\u3060\u3068\u3001div\u306e\u6642\u70b9\u3067\u30a4\u30d9\u30f3\u30c8\u4f1d\u64ad\u304c\u7d42\u4e86\u3057\u3066\u3044\u308b\u306e\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><strong>\u30c6\u30b9\u30c8<\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/event\/eventlistener02.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/event\/eventlistener02.html<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u3061\u3087\u3063\u3068\u51dd\u3063\u305fUI\u5236\u4f5c\u3084\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u969b\u306f\u3001\u8907\u6570addEventListener\u3092\u4f7f\u7528\u3057\u3066\u3044\u304f\u3053\u3068\u3082\u3042\u3063\u3066\u3001\u3053\u306e\u3053\u3068\u3082\u8003\u3048\u3066\u304a\u304f\u3068\u3088\u308d\u3057\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3067\u306f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Javascript\u3092\u7528\u3044\u305f\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3UI\u3084\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3092\u5236\u4f5c\u3057\u3066\u3044\u304f\u969b\u3001\u30bf\u30c3\u30c1\u30b9\u30bf\u30fc\u30c8\u306e\u30a4\u30d9\u30f3\u30c8\u3060\u3063\u305f\u308a\u3001\u30bf\u30c3\u30c1\u30e0\u30fc\u30d6\u306e\u30a4\u30d9\u30f3\u30c8\u3060\u3063\u305f\u308a\u3068\u3001dom\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8272\u3005\u3068\u767b\u9332\u3057\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u751f\u3055\u305b\u3066\u3044\u304f\u304b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[166,37,47,179,50,46,178,118],"class_list":["post-4528","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-iphone","tag-iphone-","tag-javascript-2","tag-jquery","tag-jquery-mobile","tag-js","tag-178","tag-118"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4528"}],"version-history":[{"count":1,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4528\/revisions"}],"predecessor-version":[{"id":4531,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4528\/revisions\/4531"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}