在DOM / JavaScript中，有什么可能的方式将附加数据传递给事件处理程序？

如何解决在DOM / JavaScript中，有什么可能的方式将附加数据传递给事件处理程序？

在Firefox上以开发人员模式运行时，出现错误消息，“未捕获的TypeError：EventTarget.addEventListener：参数2不是对象。”

我想做的是在传递值“ rock”的同时运行“ playRound（）”功能。

在排除故障时，我将console.log放入playRound（）函数中，并注意到它在甚至通过“ click”操作被告知之前就运行了它。点击甚至不会触发任何事情。

这是我到目前为止想出的...

function computerPlay () {
  let computerSelection = '';
  let randomInt = Math.floor(Math.random() * 3);

  if (randomInt === 0) {
    computerSelection = 'Rock';
  } else if (randomInt === 1) {
    computerSelection = 'Paper';
  } else {
    computerSelection = 'Scissors';
  }
  return computerSelection;
}

function playRound (playerSelection) {
  let roundWinner = '';
  let computerSelection = computerPlay();

  if (playerSelection === computerSelection) {
    roundWinner = "It's a tie!";
  } else if (playerSelection == 'Rock' && computerSelection == 'Scissors'){
    roundWinner = "You win! Rock beats scissors!";
  } else if (playerSelection == 'Rock' && computerSelection == 'Paper'){
    roundWinner = "You lose! Paper beats rock!";
  } else if (playerSelection == 'Paper' && computerSelection == 'Rock'){
    roundWinner = "You win! Paper beats rock!";
  } else if (playerSelection == 'Paper' && computerSelection == 'Scissors'){
    roundWinner = "You lose! Scissors beats paper!";
  } else if (playerSelection == 'Scissors' && computerSelection == 'Paper'){
    roundWinner = "You win! Scissors beats paper!";
  } else if (playerSelection == 'Scissors' && computerSelection == 'Rock') {
    roundWinner = "You lose! Rock beats scissors!";
  }
  console.log('TEST');

  return roundWinner;
}

const rock = document.querySelector("#rock");
const paper = document.querySelector("#paper");
const scissors = document.querySelector("#scissors");

rock.addEventListener("click",playRound("rock"));

<button id="rock" value="rock">Rock</button>
<button id="paper" value="paper">Paper</button>
<button id="scissors" value="scissors">Scissors</button>

解决方法

使用事件侦听器，您需要将函数作为第二个参数传入。目前，您正在传递playRound方法的调用返回的值。

将最后一行更改为：

rock.addEventListener("click",() => playRound("rock"));如果要使用匿名ES6箭头功能。

rock.addEventListener("click",function() { return playRound("rock") });，如果您希望使用标准匿名函数语法。

希望这对您有所帮助！

,

当然必须看到"TEST"日志。由于在尝试向playRound元素中添加事件侦听器时调用了rock，所以rock.addEventListener("click",playRound("rock")) ...最里面的函数是用playRound("rock")执行的。这样它将记录日志，并返回一个字符串（非常roundWinner）。然后，该字符串值将通过以下方式添加为rock元素的处理函数。 ... rock.addEventListener("click","It's a tie!") ...导致原因立即失败，因为addEventListener的第二个参数必须是可调用的函数。

一种可行的解决方案是实施handleNextRound事件处理程序，使其从其中一个被主动点击的元素中读取玩家的选择。

function computerPlay() {
  return [
    'rock','paper','scissors'
  ][Math.floor(Math.random() * 3)];
}

function handleNextRound(evt) {
  const decisionMap = {
    rockscissors: "You win! Rock beats scissors!",rockpaper: "You lose! Paper beats rock!",paperrock: "You win! Paper beats rock!",paperscissors: "You lose! Scissors beats paper!",scissorspaper: "You win! Scissors beats paper!",scissorsrock: "You lose! Rock beats scissors!",scissorsscissors: "It's a tie!",paperpaper: "It's a tie!",rockrock: "It's a tie!"
  };
  const playerSelection = evt.currentTarget.value;
  const computerSelection = computerPlay();

  console.log('decision :',decisionMap[playerSelection + computerSelection]);

  // return decisionMap[playerSelection + computerSelection];
}

const rock = document.querySelector("#rock");
const paper = document.querySelector("#paper");
const scissors = document.querySelector("#scissors");

rock.addEventListener("click",handleNextRound);
paper.addEventListener("click",handleNextRound);
scissors.addEventListener("click",handleNextRound);

<button id="rock" value="rock">Rock</button>
<button id="paper" value="paper">Paper</button>
<button id="scissors" value="scissors">Scissors</button>

我认为另一种不利的方法是将bind玩家选择的值作为处理函数的参数（[[BoundArguments]]）...

function computerPlay() {
  return [
    'rock','scissors'
  ][Math.floor(Math.random() * 3)];
}

function handleNextRoundWithBoundSelection(playerSelection,evt) {
  const decisionMap = {
    rockscissors: "You win! Rock beats scissors!",rockrock: "It's a tie!"
  };
  const computerSelection = computerPlay();

  console.log('(evt.currentTarget === this) ?',(evt.currentTarget === this));
  console.log('decision :',decisionMap[playerSelection + computerSelection]);
}

const rock = document.querySelector("#rock");
const paper = document.querySelector("#paper");
const scissors = document.querySelector("#scissors");

rock.addEventListener("click",handleNextRoundWithBoundSelection.bind(rock,'rock'));
paper.addEventListener("click",handleNextRoundWithBoundSelection.bind(paper,'paper'));
scissors.addEventListener("click",handleNextRoundWithBoundSelection.bind(scissors,'scissors'));

<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>

第三个选项已经由其他人建议，...提供处理程序功能为function expression（匿名）arrow function或经典形式...

function computerPlay() {
  return [
    'rock','scissors'
  ][Math.floor(Math.random() * 3)];
}

function handleNextRound(playerSelection/*,evt*/) {
  const decisionMap = {
    rockscissors: "You win! Rock beats scissors!",rockrock: "It's a tie!"
  };
  const computerSelection = computerPlay();

  // console.log('(evt.currentTarget.value === "") ?',(evt.currentTarget.value === ""));
  console.log('decision :',function () { handleNextRound('rock'); });
paper.addEventListener("click",(/*evt*/) => handleNextRound('paper'/*,evt*/));
scissors.addEventListener("click",() => handleNextRound('scissors'));

<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>