Skip to content

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

@wingmeng

Description

@wingmeng

题目:

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