我是否将 Jquery 事件侦听器正确转换为 Javascript？ 我不明白 Javascript 如何在不针对 id 的情况下工作？

Question

I'm trying to convert jquery into javascript. My app is a simple to do list and I'm targeting a button with an id called #clear-completed. Whenever I click that button on my app, it deletes the completed todo items, but I don't understand where it is being targeting in my new Javascript code.

Here is the original Jquery code

$('#footer').on('click', '#clear-completed', this.destroyCompleted.bind(this));

So I changed it to Javascript and this code worked

var footer = document.getElementById('footer');
      footer.addEventListener('click', this.destroyCompleted.bind(this))

What I don't understand is what happened the the #clear-completed id and how does my new javascript code still work, even though I am not specifying to target the #clear-completed button?

Here is the code for the destroyCompleted function

destroyCompleted: function () {
            this.todos = this.getActiveTodos();
            this.filter = 'all';
            this.render();
        },

In the debugger it runs through the activeTodos function, but I don't see anywhere where the id #clear-completed is targeted?

getActiveTodos: function () {
            return this.todos.filter(function (todo) {
                return !todo.completed;
            });
        },
        getCompletedTodos: function () {
            return this.todos.filter(function (todo) {
                return todo.completed;
            });
        },

Did I write my Jquery into Javascript properly? Or did I miss something?

Also, if the id had more than one event listener how would you code that properly? for example

$('#todo-list')
                .on('change', '.toggle', this.toggle.bind(this))
                .on('dblclick', 'label', this.edit.bind(this))
                .on('keyup', '.edit', this.editKeyup.bind(this))
                .on('focusout', '.edit', this.update.bind(this))
                .on('click', '.destroy', this.destroy.bind(this));

Answer 1

The equivalent JavaScript would be:

document.querySelector('#footer').addEventListener('click', event => {
  const element = event.target.closest('#clear-completed');

  if (
    event.currentTarget !== element && 
    event.currentTarget.contains(element)
  ) {
    this.destroyCompleted(event);
  }
});

The signature $(target).on(event, selector, handler) that you're using is called a delegated event handler, so the handler is invoked on the target element as you have correctly reproduced, but it is only invoked when the event targets an element matching selector which is descendant of target , not including target itself.

Matching the selector is reproduced above by checking that event.currentTarget .contains() the element returned by event.target .closest(selector) .

You could even break this logic out into a helper function to make it more readable:

document.querySelector('#footer').addEventListener('click', event => {
  const matches = selector => {
    const element = event.target.closest(selector);

    return (
      event.currentTarget !== element &&
      event.currentTarget.contains(element)
    );
  };

  if (matches('#clear-completed')) {
    this.destroyCompleted(event);
  }
});

Since you need this pattern multiple times, it makes sense to move it into another reusable function:

function delegate (target, type, selector, handler) {
  const matches = event => {
    const element = event.target.closest(selector);

    return (
      event.currentTarget !== element &&
      event.currentTarget.contains(element)
    );
  };

  target.addEventListener(type, event => {
    if (matches(event)) {
      handler(event);
    }
  });
}

const element = document.querySelector('#todo-list');

delegate(element, 'change', '.toggle', e => this.toggle(e));
delegate(element, 'dblclick', 'label', e => this.edit(e));
delegate(element, 'keyup', '.edit', e => this.editKeyup(e));
delegate(element, 'focusout', '.edit', e => this.update(e));
delegate(element, 'click', '.destroy', e => this.destroy(e));

Answer 2

You targeted '#clear-completed' in the jquery function by passing the argument,'#clear-completed', to your on event handler. Jquery on says:

https://api.jquery.com/on/ .on( events [, selector ] [, data ], handler )

selector Type: String

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.