Javascript event.target中有哪些值可用以及如何访问它

我正在关注一个在线研讨会和示例，您可以在这里找到：

https://openlayers.org/en/latest/examples/mouse-position.html

在上述链接中发布的示例中，在两个函数中

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
  mousePositionControl.setProjection(event.target.value);//<------HERE
});

然而，当我尝试在VisualStudio代码中运行代码时，它强调了

 .value  and .valueAsNumber 
 

红色表示不存在此类属性。 请让我知道哪些属性可以有效使用，以便我可以访问中包含的值

 event.target
 

代码：

ngOnInit（）{
this.todaydate2=this.myservice.showTodayDate（）；
this.value=this.myservice.observestest（）；
var mousePositionControl=新的MousePosition({
className:“自定义鼠标位置”，
坐标格式：createStringXY（7），
投影：‘EPSG:4326’，
//注释以下两行以确定鼠标位置
//放在地图上。
目标：document.getElementById（'mouse-position'），
undefinedHTML:“”，//有关鼠标离开映射范围时要渲染的内容：值https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
});
this.map=新地图({
控件：defaultControls（）.extend（[mousePositionControl]），
目标：“映射容器”，
图层：[
新瓦工({
来源：新XYZ来源({
网址：'http://tile.stamen.com/terrain/{z} /{x}/{y}.jpg'
})
})
],
视图：新视图({
中心：fromLonLat（[13.2232,52.4059]），
缩放：6
})
});
var projectionSelect=document.getElementById（'projection'）；
projectionSelect.addEventListener（'change'，函数（事件）{
mousePositionControl.setProjection（event.target）；
});
var precisionInput=document.getElementById（'precision'）；
precisionInput.addEventListener（'change'，函数（事件）{
var format=createStringXY（event.target）；
mousePositionControl.setCoordinateFormat（格式）；
});
}

我通过类型转换解决了这个问题，如下所示：

mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);

---

我通过类型转换解决了这个问题，如下所示：

mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);

---

event.target

中的

target

类型为

EventTarget

，每个

HTMLElement

都从中继承。因此，使用

document.getElementById（）

方法接收的任何HTML元素都是

EventTarget

，可用属性将根据特定的元素类型而有所不同。文件-

使用以下代码-

var projectionSelect=document.getElementById（'projection'）；
projectionSelect.addEventListener（'change'，函数（事件）{
mousePositionControl.setProjection（event.target.value）；
});

即使在运行时，您将通过

事件.target

接收特定类型的

HTMLElement

，但在编译时它只表示一个

EventTarget

，从文档中可以看到，

EventTarget

没有名为

value

的属性

如果您将上述代码放在JavaScript文件中，并在VS代码中打开它，它不会抱怨

值

，因为JavaScript是一种动态类型化语言，而VS代码并不试图强制执行类型检查

但是，如果将相同的代码放在TypeScript文件中，VS code将尝试应用类型检查，并发现

EventTarget

没有

值

属性

要减轻代码显示的错误，您可以将事件.target强制转换为any，并且any类型可以具有任何属性-

mousePositionControl.setProjection（（event.target as any）.value）；

或者，由于您知道

document.getElementById（）

方法返回的元素表示

select

元素和

input

元素，因此可以将它们转换为

HTMLSelectElement

和

HTMLInputElement

-

mousePositionControl.setProjection（（event.target作为HTMLSelectElement.value）；
//及
var format=createStringXY（（event.target作为HTMLInputElement）.valueAsNumber）；
事件中的
目标
。目标
属于
EventTarget
类型，并且每个
HTMLElement
都从它继承。因此，使用
document.getElementById（）
方法接收的任何HTML元素都是
EventTarget
，可用属性将根据特定的元素类型而有所不同。文件-





使用以下代码-

var projectionSelect=document.getElementById（'projection'）；
projectionSelect.addEventListener（'change'，函数（事件）{
mousePositionControl.setProjection（event.target.value）；
});

即使在运行时，您将通过
事件.target
接收特定类型的
HTMLElement
，但在编译时它只表示一个
EventTarget
，从文档中可以看到，
EventTarget
没有名为
value
的属性

如果您将上述代码放在JavaScript文件中，并在VS代码中打开它，它不会抱怨
值
，因为JavaScript是一种动态类型化语言，而VS代码并不试图强制执行类型检查

但是，如果将相同的代码放在TypeScript文件中，VS code将尝试应用类型检查，并发现
EventTarget
没有
值
属性

要减轻代码显示的错误，您可以将事件.target强制转换为any，并且any类型可以具有任何属性-

mousePositionControl.setProjection（（event.target as any）.value）；

或者，由于您知道
document.getElementById（）
方法返回的元素表示
select
元素和
input
元素，因此可以将它们转换为
mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);