Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

第 38 期(W3C 标准-JavaScript-事件):事件的绑定与移除 #41

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

题目:

JavaScript 中为 DOM 元素绑定事件可使用 addEventListener 来实现,但与之对应的事件移除方法 removeEventListener 却没有那么好用,例如它无法移除绑定的匿名方法。
请结合下面的代码,实现按钮点击一次后,移除自身绑定的匿名方法的功能。

var btn = document.createElement('button');
btn.innerText = '按钮';
btn.addEventListener('click', function() {
  btn.innerText = '我被点击了-' + (+new Date());
});
document.body.appendChild(btn);

参考答案:

window.HTMLElement && !function() {
  HTMLElement.prototype.addListener = function(type, fn, capture) {
    var el = this;
    fn = typeof fn === 'function' ? fn : function(){};

    var bind = function() {
      el.addEventListener(type, fn, capture);
      return {
        removeListener: function() {
          el.removeEventListener(type, fn);
        }
      }
    };

    return bind();
  }
}();

var btn = document.createElement('button');
btn.innerText = '按钮';
var evt = btn.addListener('click', function() {
  btn.innerText = '我被点击了-' + (+new Date());
  evt.removeListener();
});
document.body.appendChild(btn);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.