自定义方法在 addEventListener 方法中只触发一次？ [复制]答案

【问题标题】：Custom Method is firing only once in addEventListener method? [duplicate]自定义方法在 addEventListener 方法中只触发一次？ [复制]
【发布时间】：2017-01-12 15:59:28
【问题描述】：

我正在尝试将输入范围元素的“oninput”事件绑定到相应打字稿文件中声明的自定义方法。

下面是 HTML 元素：

<input type="range" id='motivation-grade' value="3" min="1" max="5">

这是我在 angular2 组件的 ngOnInit 方法中使用的事件监听器代码：

  ngOnInit() {
    this.elem = document.getElementById('motivation-grade');
    this.elem.addEventListener("click", this.motivation(document.getElementById('motivation-grade').value));
  }

在动机（str：string）方法中，我想在每次用户更改时根据所选值显示一些链接。但是动机（）方法在开始时只触发一次，之后似乎没有被击中。有人可以帮助我了解我所缺少的吗？

【问题讨论】：

谁在打电话ngOnInit
this.motivation 是否返回函数？如果不是，那么这是How to pass parameter to function using in addEventListener? 的欺骗。
@Xufox 是对的。您还应该避免使用 Angular 2 直接进行 DOM 操作。

标签： javascript angular typescript dom-events addeventlistener

【解决方案1】：

我猜你正在使用 Angular2。如果你想在输入点击时触发一个事件，你可以这样做。

<input type="range" id='motivation-grade' (click)="onInputClick(3)" value="3" min="1" max="5">

你的组件 Typescript 文件可以包含这个。

public onInputClick(value){
  //do something ...
}

尽量避免在 Angular 2 中直接操作 DOM。这是一种不好的做法

【讨论】：

感谢 Rudra，但是在尝试使用您的方式访问该值时，我得到了“未定义”。有什么建议吗？
@Jayant 当您在输入上使用（点击）时，您需要传入实际值。在这种情况下，它可以是变量，也可以是您要传递的实际值 (click) = "onInptClick(3)"
但是它完全结束了这个函数的目的，对吧？每次用户更改它时，我都需要更新的值。顺便说一句，我通过在我的 ngOnInit 中使用 var self = this 然后在我的 addEventListener 函数中使用它解决了这个问题。感谢您的帮助。

【解决方案2】：

避免直接的 dom 操作。喜欢 Rudraprasad 建议使用
<input type="range" id='motivation-grade' (click)="onInputClick($event)" value="3" min="1" max="5">
您可以使用
onInputClick(event):void{ console.log(event); } 打印事件您想要的值很可能会存储在 event.target.value

【讨论】：