Question

我有这段代码可以抓取您所在网站的html并将其复制到剪贴板。我目前有一个工作版本，当你点击chrome图标时复制文本，但我想添加几个选项，所以我试图在扩展弹出窗口中点击按钮运行脚本。

不幸的是，我不能为我的生活设法让按钮点击发生一些事情！当我用alert（“hi”）替换我的函数时，当我点击扩展图标而不是弹出窗口中的按钮时，它会弹出警报。帮助！

document.addEventListener('DOMContentLoaded', function () {
      document.getElementById("full_team").addEventListener('click', alert("HI"));;     
});

<body>
	<h2>Click to copy your roster</h2>
	<button id="full_team">Full Team</button>
	<script src="event.js"></script>
</body>

Answer 1

addEventListener需要事件名称，以及对应该执行的函数的引用。

但是，alert("HI")不是对函数的引用。此语句执行警报，并返回undefined。

有两种方法可以解决这个问题：

对于应执行的简短函数，可以使用匿名函数构造。声明
```
function(){ alert("HI"); }
```
不执行警报，但返回对将在调用时执行警报的函数的引用。所以，你的代码变成了：
```
document.getElementById("full_team").addEventListener('click', function() {
  alert("HI");
});
```
对于较长的函数或可重用的函数，只需创建一个命名函数：
```
function sayHi() {
  alert("HI");
}
```
同样，这定义了一个函数，但不执行它。然后，您可以使用函数的名称：
```
 document.getElementById("full_team").addEventListener('click', sayHi);
```
确保将引用传递给函数，而不是执行它：
```
 // Wrong!
 document.getElementById("full_team").addEventListener('click', sayHi());
```

说到重用函数，假设您想要创建一个与参数相关的函数。例如，假设您希望能够说＆＃34;嗨＆＃34;根据压制的元素，对不同的人。

然后，你可以进入更高级别并创建一个返回函数的函数：

function sayHiTo(name) {
  return function() {
    alert("Hi, " + name + "!");
  }
}

// Here, invoking the function is correct: it will return a function
document.getElementById("full_team").addEventListener('click', sayHiTo("Bob"));

Chrome按钮点击时无法运行Chrome扩展功能

1 个答案: