Javascript 这里this.innerHTML是什么意思？_Javascript_Html

Javascript 这里this.innerHTML是什么意思？

javascript html

Javascript 这里this.innerHTML是什么意思？,javascript,html,Javascript,Html,我正在为安吉拉·余的《我的鼓包计划》课程工作在这个JS文件中，她使用var drum\u note=this.innerHTML作为侦听器传递给addEventListener（）的匿名函数内部我需要知道这个是如何工作的。在这种情况下，我知道像它用来指向一个对象这样的概念，但它是如何准确地指向按钮的 My index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <hea

我正在为安吉拉·余的《我的鼓包计划》课程工作在这个JS文件中，她使用

var drum\u note=this.innerHTML

作为侦听器传递给

addEventListener（）

的匿名函数内部

我需要知道

这个是如何工作的。在这种情况下，我知道像它用来指向一个对象这样的概念，但它是如何准确地指向按钮的
My index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">

</head>

<body>

  <h1 id="title">Drum "this" here refers to the specific button that you are going to click which will then play that specific sound.
this.innerHTML there points what is inside the button. In your case, it represents drum_notes like w,a,s,d,etc.
Typically, the JavaScript keyword this
 "refers back" to the object the function "belongs to".  this
 can't be set (or overwritten) by assignment during execution, and the value for this
 will be different each time the function gets called (because it has a different owner).
In this case...

You created a button-event...for each button...in a set of buttons. As such, the value of this
 refers back to the HTML Element (which is a specific button).  The HTML Element has a property called InnerHTML...which in this case...contains the corresponding letter for said button.
The case statement then keys-off the InnerHTML's text value & plays the correct note.
...Cheers!
The value of this
 inside of a function solely depends on how this function is invoked, ie like a regular function, a method, or with this
 otherwise explicitly bound.
In the case you're asking, you're passing a callback function to addEventListener()
, so addEventListener()
 has control on how to call it. It turns out that it actually binds the callback function local this
 variable to the object it itself is executed as a method on.
The code for addEventListener()
 probably goes something like this:
function addEventListener(eventName, callback){
  // Some code
  // Execute the callback, binding its local `this` variable to the addEventListener() own `this` - the Object.prototype.call() method allows to explicitly set the `this` execution context.
  callback.call(this, eventName)
}


鼓套件
鼓此处的“this”是指您要单击的特定按钮，该按钮将播放特定的声音。
this.innerHTML指出按钮内的内容。在您的例子中，它表示鼓形音符，如w、a、s、d等。
通常，JavaScript关键字this
“引用”函数“所属”的对象<代码>此
不能在执行期间通过赋值进行设置（或覆盖），并且每次调用函数时，此
的值都会不同（因为它有不同的所有者）
在这种情况下…

您为一组按钮中的每个按钮创建了一个按钮事件。因此，this
的值引用回HTML元素（这是一个特定的按钮）。HTML元素有一个名为InnerHTML…的属性，在本例中…包含所述按钮的对应字母
case语句然后关闭InnerHTML的文本值并播放正确的注释
…干杯
 函数内部的this
的值仅取决于调用该函数的方式，如常规函数、方法，或与this
明确绑定
在您询问的情况下，您正在将回调函数传递给addEventListener（）
，因此addEventListener（）
可以控制如何调用它。实际上，它将回调函数local这个
变量绑定到它本身作为方法执行的对象上
addEventListener（）
的代码可能是这样的：
同样，在这里，这个
实际上将指向HTML元素addEventListener（）
作为上的方法调用。然后调用回调，并将其本地this
绑定到此同一元素。
此外，您不应该依赖innerHTML传递值，因为它将来可能会更改，这会破坏您的代码
使用一个属性，然后在单击时获取该值并将其用作文件名，这样就不必为每个声音添加4行

document.queryselectoral（.drum”）.forEach（（el）=>{
el.addEventListener（“单击”，函数（）{
让note=this.dataset.note
//新音频（`sounds/${note}.mp3`）.play（）；
log（`playing:sounds/${note}.mp3`）
})
})

W
A.
s
D
J
K
L
你不明白的是什么<代码>事件处理程序中的此
引用了引发事件的元素。这是否回答了您的问题@Jamiec：它指的是处理程序绑定到的元素。“每次调用同一对象上的函数时，this
的值都会不同。我不是说有必要对this
进行详细解释。这句话似乎比它有助于理解这篇
的本质更令人困惑。因为，重复我的例子，如果我在同一个对象上调用同一个方法，那么这个
将引用同一个对象。它不是因为我调用了函数而突然变成另一个对象（例如副本）。谢谢KKSSS。。。非常有用！！！！这很有帮助！你让我清白了！！！！！谢谢！！！！