【JavaScript】addEventListenerの使用例

addEventListenerについて、きちっと勉強していく。
サンプルコードをいくつか作るかな。
これも初心者用と中級者用の2つに分けて解説するかな？
addEventListenerの使用方法はかなり種類があるようだ。

addEventListenerについて勉強していく。
【JavaScript】addEventListenerの使用パターン1｜(株)令和情報ファイナンス (note.com)

次のように、8種類挙げておく。
うーん。他にもあるんかな？少しずつ書き足していこう。

〇〇.addEventListener('click', 〇〇);
〇〇.addEventListener('change', 〇〇);
〇〇.addEventListener('open', 〇〇);
〇〇.addEventListener('close', 〇〇);
〇〇.addEventListener('message', 〇〇);
〇〇.addEventListener('icecandidate', 〇〇);
〇〇.addEventListener('datachannel', 〇〇);
〇〇.addEventListener('bufferedamountlow', 〇〇);

clickイベントとchangeイベントはよく出て来るよな。

const sendButton = document.querySelector('button#sendTheData');
sendButton.addEventListener('click', 〇〇);

const megsToSend = document.querySelector('input#megsToSend');
megsToSend.addEventListener('change', 〇〇);

WebRTCのコードにおいて、openイベント、closeイベント、messageイベント、icecandidateイベント、datachannelイベント、bufferedamountlowイベントが使用されている。
1つづつ調べておこう。

const servers = null;
const dataChannelParams = {ordered: true};

localConnection = new RTCPeerConnection(servers);

sendChannel = localConnection.createDataChannel('sendDataChannel', dataChannelParams);

function onSendChannelOpen() {

  console.log('Send channel is open');
  chunkSize = Math.min(localConnection.sctp.maxMessageSize, MAX_CHUNK_SIZE);
  console.log('Determined chunk size: ', chunkSize,localConnection.sctp.maxMessageSize);
  dataString = new Array(chunkSize).fill('X').join('');
  lowWaterMark = chunkSize; // A single chunk
  highWaterMark = Math.max(chunkSize * 8, 1048576); // 8 chunks or at least 1 MiB
  console.log('Send buffer low water threshold: ', lowWaterMark);
  console.log('Send buffer high water threshold: ', highWaterMark);
  sendChannel.bufferedAmountLowThreshold = lowWaterMark;
  // bufferedamountlowというイベントがあるのか？
  sendChannel.addEventListener('bufferedamountlow', (e) => {
    console.log('BufferedAmountLow event:', e);
    sendData();
  });

  startSendingData();
}

sendChannel.addEventListener('open', onSendChannelOpen);
sendChannel.addEventListener('close', onSendChannelClosed);

const remoteConnection = new RTCPeerConnection(servers);
remoteConnection.addEventListener('icecandidate', e => onIceCandidate(remoteConnection, e));
remoteConnection.addEventListener('datachannel', receiveChannelCallback);

function receiveChannelCallback(event) {
  console.log('Receive Channel Callback');
  receiveChannel = event.channel;
  receiveChannel.binaryType = 'arraybuffer';
  receiveChannel.addEventListener('close', onReceiveChannelClosed);
  receiveChannel.addEventListener('message', onReceiveMessageCallback);
}

remoteConnection.addEventListener('datachannel', receiveChannelCallback);

async function onIceCandidate(pc, event) {
  const candidate = event.candidate;
  if (candidate === null) {
    return;
  } // Ignore null candidates
  try {
    await getOtherPc(pc).addIceCandidate(candidate);
    console.log('AddIceCandidate successful: ', candidate);
  } catch (e) {
    console.error('Failed to add Ice Candidate: ', e);
  }
}

remoteConnection.addEventListener('icecandidate', e => onIceCandidate(remoteConnection, e));

WebRTCのコードは次のWebRTC Samplesにあった。
Transfer a file (webrtc.github.io)

• 
• Tweet

• JavaScript