Event Delegation: where to put the "if" statement

Question

Javascript newbie here.

Is there a "best practice" for placement of "if" statements in event delegation?

Context
I'm setting up event listeners using vanilla Javascript (I know jQuery etc. would simplify things, but let's stick to vanilla JS): there's an event listener on the parent element that invokes a function when a child is clicked. In our example, that function to-be-invoked lives elsewhere in the code.

Let's say I only want to take action when element with id=child-element is clicked. To do this, I use an "if" statement.

There are two obvious places I can put the if statement:

1. Within the event listener
2. Within the function

Question
Is (1) or (2) preferred? If so, why? ("Better memory management", "code is easier to read", etc.)

Example 1

var foo = {
    bindEvent: function () {
        document.getElementById('clickableElement').addEventListener('click', function (e) {
            const clickTarget = e.target.id
            if (clickTarget === 'child-element') {
                foo.takeAnAction.bind(foo);
                foo.takeAnAction();
            };
        });
    },  
    takeAnAction: function () {
            console.log('Click');
    },
};

Example 2

var foo = {
     bindEvent: function () {
        document.getElementById("clickableElement").addEventListener("click",
        foo.takeAnAction.bind(foo));
        },
     takeAnAction: function(e) {
       if (e.target.id === "child-element") {
         console.log('click');
       };
     },
};

Thanks!

Answer 1

I would go with option 1. The reason is that you can easily generalise it to handle any event delegation, so it's reusable. Sample:

var foo = {
    bindEvent: function (selector, callback) { //accept a selector to filter with
        document.getElementById('clickableElement').addEventListener('click', function (e) {
            const clickTarget = e.target; //take the element

            // check if the original target matches the selector
            if (clickTarget.matches(selector)) { 
                takeAnAction.call(foo);
            }
        });
    },  
    takeAnAction: function () {
            console.log('Click');
    },
};

foo.bindEvent("#child-element", foo.takeAction);

Now you can produce any amount of delegated event bindings. Adding another delegated binding is as simple as:

foo.bindEvent("#parent-element", foo.takeAction);
foo.bindEvent(".table-of-content", foo.takeAction);

With option 2, you will not need to change the implementation or produce new functions for each case:

/*... */
takeAnAction: function(event) {
  if (event.target.id === "child-element") {
    console.log('click');
  };
},
takeAnActionForParent: function(event) {
   if (event.target.id === "parent-element") {
    console.log('click');
  };
},
takeAnActionOnTableOfContentItems: function(event) {
  if (event.target.classList.contains("table-of-content") {
    console.log('click');
  };
},

If you need to execute the same logic in each case, there is really no need to add a new function for every single case. So, for maintainability point of view, adding the logic in the event listener that would call another function is simpler to manage than producing different functions to be called.