在JavaScript中,addEventListener()方法可用來將事件監聽器附加到元素。然而,當使用bind()方法將偵聽器函數綁定到物件時,刪除偵聽器可能會成為一個挑戰。
常見的方法是維護綁定偵聽器函數的清單。這樣可以透過為removeEventListener()方法提供相同的函數參考來輕鬆刪除。
<code class="javascript">// Constructor MyClass = function() { this.myButton = document.getElementById("myButtonID"); this.listenerList = []; this.listenerList.push(this.myButton.addEventListener("click", this.clickListener.bind(this))); } // Prototype method MyClass.prototype.clickListener = function(event) { console.log(this); // must be MyClass } // Public method MyClass.prototype.disableButton = function() { this.listenerList.forEach((listener) => removeEventListener('click', listener)); }</code>
另一種方法是將綁定函數引用分配給變量,如解決方案所建議的:
<code class="javascript">var boundClickListener = this.clickListener.bind(this); this.myButton.addEventListener("click", boundClickListener); this.myButton.removeEventListener("click", boundClickListener);</code>
直接使用綁定函數,您無需維護綁定定偵聽器列表,從而簡化了刪除過程。
以上是在 JavaScript 中使用「bind()」時如何有效刪除事件監聽器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!