个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我应该根据我按的键[RGBY]更改每个div的背景颜色。按 R 会让它们变成红色，G 就会变成绿色等等。它现在不起作用，我不明白为什么。
除了主要问题之外，我还有其他一些问题:
首先，对于这个特定的练习，我应该在 .addEventListener 上使用文档还是窗口？
第二，在 document.addEventListener("keydown", switchColor)
我应该这样做还是使用 document.addEventListener("keydown", switchColor(e)) 代替？我对此感到困惑，因为我的 switchColor 函数是这样构建的: const switchColor = e => {...}
const divList = document.querySelectorAll("div");
document.addEventListener("keydown", switchColor); // this or switchColor(e) ?
//would 'window.addEventListener' be okay in here as well ??
const switchColor = e => {
let color = "n/a";
switch (e.keyCode) {
case 82: color = red; break;
case 89: color = yellow; break;
case 71: color = green; break;
case 66: color = blue; break;
}
divList.forEach(value => {
value.style.backgroundColor = color;
});
}<body>
<p>Press the R (red), Y (yellow), G (green) or B (blue) key to change paragraph colors accordingly.</p>
<h1>Paragraph 1</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim fringilla dapibus. Curabitur placerat efficitur
molestie. Quisque quis consequat nibh. Aenean feugiat, eros eget aliquam vulputate, leo augue luctus lectus, non
lobortis libero quam non sem. Aliquam sit amet tincidunt ex, mollis interdum massa.</div>
<h1>Paragraph 2</h1>
<div>Vivamus at justo blandit, ornare leo id, vehicula urna. Fusce sed felis eget magna viverra feugiat eget nec orci. Duis
non massa nibh. Aenean vehicula velit a magna lobortis tempor ut quis felis. Proin vitae dui a eros facilisis fringilla
ut ut ante.</div>
<h1>Paragraph 3</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet pharetra massa. Nulla blandit erat nulla, et scelerisque
libero varius ut. Praesent bibendum eu magna ullamcorper venenatis. Sed ut pellentesque leo. Sed ultrices sapien
consequat odio posuere gravida.</div>
</body>
</html>最佳答案
window 和 document 是不同的对象并且具有不同的事件，因此您应该根据您实际需要执行的操作将事件绑定(bind)到其中一个或另一个。
但是，有一些常见的选项，并且使用其中一个或另一个选项之间可能存在一些差异，尽管有时两个选项都可以模糊地使用而不会出现问题。例如:
onabort :当用户中止资源加载时调用，例如按×当页面仍在加载时，chrome 上的按钮(位于导航栏的左侧)。
我认为这没有什么区别。
onblur :由于该事件不会冒泡，因此您只能在特定事件上监听它。
因此，如果您在window上收听它，当窗口本身失去焦点时(当用户切换到不同的选项卡时)，您的事件监听器将被调用。
如果您在特定元素上监听它，假设是 <input>元素，那么当该输入失去焦点时它将被触发。
从概念上讲，至少对我来说，考虑监听 document 是没有意义的。 。另外，如果你尝试一下，你会发现没有办法让它启动，至少在最新的 Chrome 中是这样:
document.onblur = () => console.log('Triggered from document.');
onunload :当用户离开页面时调用。这是特定于window的.
ondrag :当 drag 时调用事件发生且特定于document .
这里是 event handlers for window 的完整列表这里是 document 的.
回到你的代码，你可以监听 keydown在其中任何一个上，但我想说最常见的是使用 document除非您有特定原因，否则请使用 window相反，主要是该事件仅存在于window中(如 onunload )或者它们在一个和另一个中的工作方式存在差异，您确实需要在 window 上聆听它。 (如onblur)。
这样做的一个原因是传播的事件将到达 document之前的对象 window一，虽然差异可以忽略不计。出于同样的原因，一般来说，您应该始终尝试尽可能靠近生成事件的元素来监听事件，以提高性能，尽管在某些情况下您将需要 event delegation在您需要以类似方式处理多个元素中的事件并且为每个元素创建一个监听器需要太多资源的情况下提高性能。
因此，您应该使用它 document.addEventListener('keydown', switchColor) .
document.addEventListener 需要引用function每次发生正确的事件时它都会调用。因此，您需要将函数放在不带括号的位置，否则您不会传递对它的引用，而是调用该函数时返回的任何内容，这将是 undefined在你的情况下。
此外，即使您没有注意到差异，该代码也已经闻起来了，因为您没有任何 e变量来传递它，所以你会得到 ReferenceError 如果你尝试这样做。
您的代码的问题在于，当您这样做时...
document.addEventListener('keydown', switchColor)
...switchColor function尚未定义，因此您还将获得 ReferenceError在这里。
要修复它，只需将该行移到 const switchColor = e => { ... }; 之后即可，像这样:
const divs = document.querySelectorAll('div');
const switchColor = e => {
let color = 'transparent';
switch (e.keyCode) {
case 82: color = 'red'; break;
case 89: color = 'yellow'; break;
case 71: color = 'green'; break;
case 66: color = 'blue'; break;
}
divs.forEach(div => {
div.style.backgroundColor = color;
});
};
document.addEventListener('keydown', switchColor);<p>Press the R (red), Y (yellow), G (green) or B (blue) key to change paragraph colors accordingly.</p>
<h1>Paragraph 1</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim fringilla dapibus. Curabitur placerat efficitur molestie. Quisque quis consequat nibh. Aenean feugiat, eros eget aliquam vulputate, leo augue luctus lectus, non lobortis libero quam non sem. Aliquam sit amet tincidunt ex, mollis interdum massa.</div>
<h1>Paragraph 2</h1>
<div>Vivamus at justo blandit, ornare leo id, vehicula urna. Fusce sed felis eget magna viverra feugiat eget nec orci. Duis non massa nibh. Aenean vehicula velit a magna lobortis tempor ut quis felis. Proin vitae dui a eros facilisis fringilla ut ut ante.</div>
<h1>Paragraph 3</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet pharetra massa. Nulla blandit erat nulla, et scelerisque libero varius ut. Praesent bibendum eu magna ullamcorper venenatis. Sed ut pellentesque leo. Sed ultrices sapien consequat odio posuere gravida.</div>关于javascript - addEventListener 不工作和一些问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45467003/
25
4
0
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。 我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
这是我实际代码的简化版本。 有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
我想是新手问题。 以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。 正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
我有一个像 那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll
我是一名优秀的程序员,十分优秀！