Why is it important to use event listeners instead of inline JavaScript code in HTML elements for better code organization?

Using event listeners instead of inline JavaScript code in HTML elements is important for better code organization because it separates the structure (HTML), presentation (CSS), and behavior (JavaScript) of a webpage. This separation makes the code easier to maintain, understand, and debug. Additionally, it allows for a cleaner and more scalable codebase.

<?php
// Using event listeners for better code organization
echo '<button id="myButton">Click me</button>';
echo '<script>';
echo 'document.getElementById("myButton").addEventListener("click", function() {';
echo '  alert("Button clicked!");';
echo '});';
echo '</script>';
?>