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

编程问答 2022-05-16

问题描述

我正在关注在线研讨会和示例，您可以在此处找到：

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

解决方法

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

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

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

使用以下代码 -

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

即使在运行时您会通过 HTMLElement 收到特定类型的 event.target，但在编译时它仅代表一个 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 和 {{ 1}} -

HTMLInputElement
angularangularangular-openlayersjavascriptopenlayersopenlayers