event.target 中可用的值以及如何访问它答案

【问题标题】：which values are available in event.target and how to access itevent.target 中可用的值以及如何访问它
【发布时间】：2021-03-26 08:55:58
【问题描述】：

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

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

【问题讨论】：

“这意味着不存在这样的属性” - 不完全是。这意味着 VS Code 的 Linter 找不到任何对它的引用。您可以通过使用正确类型转换对象来启用它。
你不能只是 console.log(event) 并在浏览器控制台中查看你的输出吗？在那里你可以看到你可以访问哪些变量。这可能不是独立于浏览器的，但可以为您提供一个好的起点？

标签： javascript node.js angular openlayers angular-openlayers

【解决方案1】：

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

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

【讨论】：

您的第一个事件目标不是HTMLInputElement，而是HTMLSelectElement。

【解决方案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);

【讨论】：