哪些值在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

但是，当我试图在visual studio代码中运行该代码时，它会将这两个代码下划线。

 .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

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

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

Answer 2

target in event.target是EventTarget类型，每个HTMLElement都继承它。因此，使用document.getElementById()方法接收到的任何HTML元素都是一个EventTarget和，可用的属性将根据特定的元素类型而有所不同。这些文件-

• EventTarget
• HTMLElement

用下面的代码-

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

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

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

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

为了减少错误，VS代码显示您可以将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);