Why my event listener not behaving correctly, as my function do,, sharing the same functionality?

Why is my event listener not behaving correctly, as my function do, sharing the same functionality?

I need to hide the row in a table, based on the input in the search bar.
The below is the functionality I have tried.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table

I want this to be implemented in Event listener, instead of function.

<!DOCTYPE html>
<html>
    <head>
        <title>Filter Table</title>
        
        <style>
            body{
                font-family: 'Bebas Neue', cursive;
                font-family: 'M PLUS 2', sans-serif;
            }
            *{
                box-sizing: border-box;
            }

            input[type = "text"]{
                border: 1px solid black;
                width: 96%;
                margin: 0 50px;
                padding: 10px 35px 10px 35px;
                font-size: 15px;
                font-family: 'Bebas Neue', cursive;
                font-family: 'M PLUS 2', sans-serif;
                background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png');
                background-repeat: no-repeat;
                background-size: 30px;
                background-position: 3px 6px; 
            }
            #myTable{
                width: 96%;
                border: 1px solid rgb(197, 194, 194);
                margin: 10px 50px;
                border-collapse: collapse;
                font-size: 20px;
            }
            #myTable td,th{
                text-align: left;
                padding: 20px;
            }
            tr{
                border-bottom: 1px solid #ddd;
            }
            #myTable tr.header, #myTable tr:hover{
                background-color: rgb(241, 241, 241);
            }

        </style>
    </head>
    <body>
        <h2><b>My Customers</b></h2>
        <input type="text" placeholder="Search for names.." onkeyup="myFunction()"  id="myInput" >
        <table id="myTable">
            <tr class="header">
                <th style="width: 60%;"><b>Name</b></th>
                <th style="width: 40%;"><b>Country</b></th>
            </tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Berglunds snabbkop</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td>Island Trading</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Koniglich Essen</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Italy</td>
            </tr>
            <tr>
                <td>North/South</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Paris specialites</td>
                <td>France</td>
            </tr>
        </table>
    </body>
    <script>
        // Function to filter the table, based on search
        function myFunction() {
            
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                }
                else{
                    tr[i].style.display = "none";
                }
                }       
            }
        }
        
        // Event Listener, to filter the table, based on search
        // var input = document.getElementById('myInput');
        // input.addEventListener('click', function(){
        //     var myTable = document.getElementById('myTable');
        //     var row = myTable.getElementsByTagName('tr');
        //     var value = input.value;
        //     var ex_val = value.toUpperCase();
        //     for(var i=1;i < row.length;i++){
        //         var content = row[i].getElementsByTagName('td')[0]; 
        //         var ex_con = content.textContent.toUpperCase();
        //         if ( ex_con.indexOf(ex_val) > -1){
        //             row[i].style.display = '';
        //         }
        //         else{
        //             row[i].style.display = 'none';
        //         }
        //     }
        // })
    </script>
</html>