event-listener 相关问题

我有一个包含多个相似元素的网站，需要应用事件监听器：我有一个包含多个相似元素的网站，需要应用事件监听器： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <a href = '#' class = "click_me">Click me</a> <br> <a href = '#' class = "click_me">Click me</a> <br> <a href = '#' class = "click_me">Click me</a> <script src = "example.js"></script> <script> new myClass(5); </script> </body> </html> 我通过遍历元素来做到这一点。我希望回调函数能够访问元素、父类实例和事件。所以我想我必须在循环中定义回调函数。但是，这使得很难删除事件侦听器。在这个例子中，我调用了 setUpEventHandlers 方法两次，第二次调用应该删除第一次调用创建的事件侦听器。但是，当我加载网页时，我可以在检查器中看到两组侦听器。我想这是因为在循环中重新定义了函数，所以没有被removeEventListener当作同一个函数。我怎样才能删除第一组听众？ class myClass { // Class constructor. constructor(input_foo) { // Process input. this.foo = input_foo; // Create event listeners for this instance. this._setUpEventHandlers(); // Re-create event listeners (should remove previous ones). this._setUpEventHandlers(); }; // Loops over elements and creates event listeners. _setUpEventHandlers() { // Loop over elements. document.querySelectorAll('.click_me').forEach(element => { // Define event listener function with "this" bound and // appropriate signature. var onClickFunction = function(event) { this.onClick(element, event); }.bind(this); // Remove existing event listeners. element.removeEventListener('click', onClickFunction, false); // Add event listener function for this element. element.addEventListener( 'click', onClickFunction, false ); } ); } // Define event listener function. onClick(element, event) { event.preventDefault(); console.log(this); console.log(event); console.log(element); console.log('<br>'); } } 可以使用箭头函数来避免bind。您还可以通过访问 event.currentTarget 而不是传递对元素的引用来简化您的点击处理程序调用。因此，你可以这样做： class MyClass { constructor(input_foo) { this.foo = input_foo; this.onClickFunction = e => this.onClick(e); this._setUpEventHandlers(); this._setUpEventHandlers(); }; _setUpEventHandlers() { document.querySelectorAll('.click_me').forEach(element => { element.removeEventListener('click', this.onClickFunction); element.addEventListener('click', this.onClickFunction); }); } onClick(event) { event.preventDefault(); console.log(this.constructor.name); console.log(event.constructor.name); console.log(event.currentTarget.constructor.name); console.log(event.currentTarget.innerText); console.log('<br>'); } } let obj = new MyClass(); <div class="click_me">hello</div> <div class="click_me">world</div> 我调整了您的代码，使其按您的预期工作。它对你不起作用的原因是因为永远不会保存对回调方法处理程序的引用。必须使用与用于实例化新事件的完全相同的处理程序来删除事件。在您的情况下，您引用了一个调用事件处理程序方法的匿名函数，并且您不能重新引用匿名函数。试试这个： class myClass { // Class constructor. constructor(input_foo) { // Process input. this.foo = input_foo; // Create event listeners for this instance. this._setUpEventHandlers(); // Re-create event listeners (should remove previous ones). this._setUpEventHandlers(); }; // Loops over elements and creates event listeners. _setUpEventHandlers() { // when onClickFunction is called, the HTML element that triggered the click and the Event object are automatically passed to the function, no need to specifically define them as arguments let onClickFunction = this.onClick; // Loop over elements. document.querySelectorAll('.click_me').forEach(element => { // Remove existing event listeners. element.removeEventListener('click', onClickFunction, false); // Add event listener function for this element. element.addEventListener( 'click', onClickFunction, false ); } ); } // Define event listener function. onClick() { event.preventDefault(); console.log(this); // references the element that triggered the event console.log(event); // references the Event object that was triggered console.log('<br>'); } } 在您的代码中，每次调用 _setUpEventHandlers 方法时，以下行都会创建一个新的匿名函数： var onClickFunction = function(event) { this.onClick(element, event); }.bind(this);

javascript events event-handling event-listener

回答 2 投票 0

如何定义操作顺序

目前我有一个新表格，用户填写该表格以创建请求。一旦用户在表单中输入信息并单击提交按钮，事件处理程序就会触发 Promise.all 请求。

reactjs axios event-listener

回答 0 投票 0

（已解决）导航栏滚动到视图中导致单击时链接失败

编辑：问题已解决。我将保留此帖子，以帮助可能面临相同问题的其他人。该错误与让浏览器处理导航栏上的点击有关。通过添加

javascript scroll navbar event-listener js-scrollintoview

回答 0 投票 0

导航栏滚动到视图导致点击时链接失败

编辑：问题已解决。我将保留此帖子，以帮助可能面临相同问题的其他人。该错误与让浏览器处理导航栏上的点击有关。通过添加