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

Question

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

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

在上面提到的link中发布的示例中，在两个函数中

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

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

用下面的代码-

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

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

which values are available in event.target and how to access it

javascript

node.js

angular

openlayers

angular-openlayers