Event Delegation: where to put the "if" statement

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!