JavaScript 语法困惑

标签 javascript dom dom-events

// The keys and notes variables store the piano keys
const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 
'high-c-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a- 
sharp-key'];
const notes = [];
keys.forEach(function(key){
notes.push(document.getElementById(key));
})

// Write named functions that change the color of the keys below
const keyPlay = function(event){
event.target.style.backgroundColor = "#ababab"; 
}
const keyReturn = function(event){
event.target.style.backgroundColor = ""; 
}
// Write a named function with event handler properties
function eventAssignment(note){
note.onmousedown = keyPlay;
note.onmouseup = function(){
    keyReturn(event);
}
}

// Write a loop that runs the array elements through the function
notes.forEach(eventAssignment);

LINE-17 和 LINE-18 通过触发事件处理程序来实现类似的目的,讲师告诉我不要在 LINE-17 中使用此语法,即使它工作得很好。他提到了一些完全在我脑海中跳跃的东西“我们不能将 note.onmousedown 定义为 keyPlay 函数,因为它只会重新定义该函数(我不知道他指的是哪个函数被重新定义)”

如有任何帮助,我们将不胜感激。

最佳答案

第一行将在鼠标按下时直接调用 keyPlay,同时第二行将创建一个函数,然后调用 keyReturn。第二行实际上是错误的,因为事件未定义(您必须在函数的输入中声明它)。我更喜欢第一行,因为它可以使代码保持简洁。

关于JavaScript 语法困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61629629/

相关文章:

javascript - 与 discord bot 通信的 HTML/PHP 网站

javascript - 如何从 HTTP 上下文对象获取 Post 数据

javascript - 将一个元素追加到同一位置的新元素

javascript - 暂时禁用事件监听器并稍后重新绑定(bind)

javascript - 在 javascript 中捕获 X-Frame-Options 错误

javascript - 无法通过 JavaScript 中的命名键访问数组

javascript - HTML5 canvas stroke() 粗而模糊

javascript - 如何在没有标签的情况下获取DOM和文本中的所有元素

javascript - 是否可以更改 dom 元素属性类型? (数字、字符串等)

javascript - 绕过 Firefox 的刷新行为