{"id":5157,"date":"2024-09-23T16:18:19","date_gmt":"2024-09-23T07:18:19","guid":{"rendered":"http:\/\/attacktube.com\/?p=5157"},"modified":"2024-10-13T18:52:16","modified_gmt":"2024-10-13T09:52:16","slug":"%e3%80%90javascript%e3%80%91addeventlistener","status":"publish","type":"post","link":"https:\/\/attacktube.com\/?p=5157","title":{"rendered":"\u3010JavaScript\u3011addEventListener\u306e\u4f7f\u7528\u4f8b"},"content":{"rendered":"\n<p>addEventListener\u306b\u3064\u3044\u3066\u3001\u304d\u3061\u3063\u3068\u52c9\u5f37\u3057\u3066\u3044\u304f\u3002<br>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u3044\u304f\u3064\u304b\u4f5c\u308b\u304b\u306a\u3002<br>\u3053\u308c\u3082\u521d\u5fc3\u8005\u7528\u3068\u4e2d\u7d1a\u8005\u7528\u306e2\u3064\u306b\u5206\u3051\u3066\u89e3\u8aac\u3059\u308b\u304b\u306a\uff1f<br>addEventListener\u306e\u4f7f\u7528\u65b9\u6cd5\u306f\u304b\u306a\u308a\u7a2e\u985e\u304c\u3042\u308b\u3088\u3046\u3060\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<br>\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-3461056110605997\" crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3461056110605997\" data-ad-slot=\"3137443461\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<br>\n\n\n\n<p>addEventListener\u306b\u3064\u3044\u3066\u52c9\u5f37\u3057\u3066\u3044\u304f\u3002<br><a href=\"https:\/\/note.com\/reiwa_info_fin\/n\/n6ff7d25ec99c\">\u3010JavaScript\u3011addEventListener\u306e\u4f7f\u7528\u30d1\u30bf\u30fc\u30f31\uff5c(\u682a)\u4ee4\u548c\u60c5\u5831\u30d5\u30a1\u30a4\u30ca\u30f3\u30b9 (note.com)<\/a><br><br>addEventListener\u306e\u3088\u304f\u5206\u304b\u3063\u3066\u3044\u306a\u3044\u3068\u3053\u308d<br><a href=\"https:\/\/note.com\/reiwa_info_fin\/n\/n43ff5eb0bc5c\">\u3010JavaScript\u3011addEventListener\u306e\u7591\u554f\uff5c(\u682a)\u4ee4\u548c\u60c5\u5831\u30d5\u30a1\u30a4\u30ca\u30f3\u30b9 (note.com)<\/a><\/p>\n\n\n\n<p>\u6b21\u306e\u3088\u3046\u306b\u30018\u7a2e\u985e\u6319\u3052\u3066\u304a\u304f\u3002<br>\u3046\u30fc\u3093\u3002\u4ed6\u306b\u3082\u3042\u308b\u3093\u304b\u306a\uff1f\u5c11\u3057\u305a\u3064\u66f8\u304d\u8db3\u3057\u3066\u3044\u3053\u3046\u3002<\/p>\n\n\n\n<pre><code>\n\u3007\u3007.addEventListener('click', \u3007\u3007);\n\u3007\u3007.addEventListener('change', \u3007\u3007);\n\u3007\u3007.addEventListener('open', \u3007\u3007);\n\u3007\u3007.addEventListener('close', \u3007\u3007);\n\u3007\u3007.addEventListener('message', \u3007\u3007);\n\u3007\u3007.addEventListener('icecandidate', \u3007\u3007);\n\u3007\u3007.addEventListener('datachannel', \u3007\u3007);\n\u3007\u3007.addEventListener('bufferedamountlow', \u3007\u3007);\n<\/code><\/pre>\n\n\n\n<p>click\u30a4\u30d9\u30f3\u30c8\u3068change\u30a4\u30d9\u30f3\u30c8\u306f\u3088\u304f\u51fa\u3066\u6765\u308b\u3088\u306a\u3002<\/p>\n\n\n\n<pre><code>\nconst sendButton = document.querySelector(&#039;button#sendTheData&#039;);\nsendButton.addEventListener(&#039;click&#039;, \u3007\u3007);\n\nconst megsToSend = document.querySelector(&#039;input#megsToSend&#039;);\nmegsToSend.addEventListener(&#039;change&#039;, \u3007\u3007);\n<\/code><\/pre>\n\n\n\n<p>WebRTC\u306e\u30b3\u30fc\u30c9\u306b\u304a\u3044\u3066\u3001open\u30a4\u30d9\u30f3\u30c8\u3001close\u30a4\u30d9\u30f3\u30c8\u3001message\u30a4\u30d9\u30f3\u30c8\u3001icecandidate\u30a4\u30d9\u30f3\u30c8\u3001datachannel\u30a4\u30d9\u30f3\u30c8\u3001bufferedamountlow\u30a4\u30d9\u30f3\u30c8\u304c\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u3002<br>1\u3064\u3065\u3064\u8abf\u3079\u3066\u304a\u3053\u3046\u3002<\/p>\n\n\n\n<pre><code>\nconst servers = null;\nconst dataChannelParams = {ordered: true};\n\nlocalConnection = new RTCPeerConnection(servers);\n\nsendChannel = localConnection.createDataChannel(&#039;sendDataChannel&#039;, dataChannelParams);\n\nfunction onSendChannelOpen() {\n\n  console.log(&#039;Send channel is open&#039;);\n  chunkSize = Math.min(localConnection.sctp.maxMessageSize, MAX_CHUNK_SIZE);\n  console.log(&#039;Determined chunk size: &#039;, chunkSize,localConnection.sctp.maxMessageSize);\n  dataString = new Array(chunkSize).fill(&#039;X&#039;).join(&#039;&#039;);\n  lowWaterMark = chunkSize; \/\/ A single chunk\n  highWaterMark = Math.max(chunkSize * 8, 1048576); \/\/ 8 chunks or at least 1 MiB\n  console.log(&#039;Send buffer low water threshold: &#039;, lowWaterMark);\n  console.log(&#039;Send buffer high water threshold: &#039;, highWaterMark);\n  sendChannel.bufferedAmountLowThreshold = lowWaterMark;\n  \/\/ bufferedamountlow\u3068\u3044\u3046\u30a4\u30d9\u30f3\u30c8\u304c\u3042\u308b\u306e\u304b\uff1f\n  sendChannel.addEventListener(&#039;bufferedamountlow&#039;, (e) =&gt; {\n    console.log(&#039;BufferedAmountLow event:&#039;, e);\n    sendData();\n  });\n\n  startSendingData();\n}\n\nsendChannel.addEventListener(&#039;open&#039;, onSendChannelOpen);\nsendChannel.addEventListener(&#039;close&#039;, onSendChannelClosed);\n\nconst remoteConnection = new RTCPeerConnection(servers);\nremoteConnection.addEventListener(&#039;icecandidate&#039;, e =&gt; onIceCandidate(remoteConnection, e));\nremoteConnection.addEventListener(&#039;datachannel&#039;, receiveChannelCallback);\n\nfunction receiveChannelCallback(event) {\n  console.log(&#039;Receive Channel Callback&#039;);\n  receiveChannel = event.channel;\n  receiveChannel.binaryType = &#039;arraybuffer&#039;;\n  receiveChannel.addEventListener(&#039;close&#039;, onReceiveChannelClosed);\n  receiveChannel.addEventListener(&#039;message&#039;, onReceiveMessageCallback);\n}\n\nremoteConnection.addEventListener(&#039;datachannel&#039;, receiveChannelCallback);\n\nasync function onIceCandidate(pc, event) {\n  const candidate = event.candidate;\n  if (candidate === null) {\n    return;\n  } \/\/ Ignore null candidates\n  try {\n    await getOtherPc(pc).addIceCandidate(candidate);\n    console.log(&#039;AddIceCandidate successful: &#039;, candidate);\n  } catch (e) {\n    console.error(&#039;Failed to add Ice Candidate: &#039;, e);\n  }\n}\n\nremoteConnection.addEventListener(&#039;icecandidate&#039;, e =&gt; onIceCandidate(remoteConnection, e));\n<\/code><\/pre>\n\n\n\n<p>WebRTC\u306e\u30b3\u30fc\u30c9\u306f\u6b21\u306eWebRTC Samples\u306b\u3042\u3063\u305f\u3002<br><a href=\"https:\/\/webrtc.github.io\/samples\/src\/content\/datachannel\/filetransfer\/\">Transfer a file (webrtc.github.io)<\/a><\/p>\n\n\n\n<script type=\"text\/javascript\">\njQuery(function($){\n$(\".jp-video\").hide();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>addEventListener\u306b\u3064\u3044\u3066\u3001\u304d\u3061\u3063\u3068\u52c9\u5f37\u3057\u3066\u3044\u304f\u3002\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u3044\u304f\u3064\u304b\u4f5c\u308b\u304b\u306a\u3002\u3053\u308c\u3082\u521d\u5fc3\u8005\u7528\u3068\u4e2d\u7d1a\u8005\u7528\u306e2\u3064\u306b\u5206\u3051\u3066\u89e3\u8aac\u3059\u308b\u304b\u306a\uff1faddEventListener\u306e\u4f7f\u7528\u65b9\u6cd5\u306f\u304b\u306a\u308a\u7a2e\u985e\u304c\u3042\u308b\u3088\u3046\u3060\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-5157","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/5157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5157"}],"version-history":[{"count":11,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/5157\/revisions"}],"predecessor-version":[{"id":5675,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/5157\/revisions\/5675"}],"wp:attachment":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}