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

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