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

Question

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

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
});

和

var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
var format = createStringXY(event.target.valueAsNumber);//<------HERE
mousePositionControl.setCoordinateFormat(format);
});

分别使用了以下属性

event.target.value , event.target.valueAsNumber

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

.value  and .valueAsNumber 

红色，这意味着这样的属性不存在。请让我知道哪些属性是有效的，这样我就可以访问中包含的值

event.target

代码：

ngOnInit(){
this.todaydate2 = this.myservice.showTodayDate();
this.value = this.myservice.observablesTest();
var mousePositionControl = new MousePosition({
className: 'custom-mouse-position',
coordinateFormat: createStringXY(7),
projection: 'EPSG:4326',
// comment the following two lines to have the mouse position
// be placed within the map.
target: document.getElementById('mouse-position'),
undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
});
this.map = new Map({
controls: defaultControls().extend([mousePositionControl]),
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: fromLonLat([13.2232,52.4059]),
zoom: 6
})
});
var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
mousePositionControl.setProjection(event.target);
});
var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
var format = createStringXY(event.target);
mousePositionControl.setCoordinateFormat(format);
});
}

Answer 1

event.target中的target是EventTarget类型，每个HTMLElement都继承自它。因此，使用document.getElementById()方法接收的任何HTML元素都是EventTarget，并且可用属性将根据特定元素类型而变化。文件-

• 事件目标
• HTML元素

使用以下代码-

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

即使在运行时，您将通过event.target接收特定类型的HTMLElement，但在编译时，它仅代表EventTarget，正如您从文档中看到的，EventTarget没有名为value的属性。

如果你把上面的代码放在一个JavaScript文件中，并在VS code中打开它，它不会抱怨value，因为JavaScript是一种动态类型的语言，VS code并没有试图强制执行类型检查。

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

为了减少VS Code显示的错误，您可以将event.target强制转换为any，并且any类型可以具有任何属性-

mousePositionControl.setProjection((event.target as any).value);

或者，由于您知道document.getElementById()方法返回的元素表示select元素和input元素，因此可以将它们强制转换为HTMLSelectElement和HTMLInputElement-

mousePositionControl.setProjection((event.target as HTMLSelectElement).value);
// and
var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);

Answer 2

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

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