How can I globally handle AJAX start and stop events

<button id="loadData">Load Data</button>

    <!-- Loader -->
    <div id="loader">Loading...</div>

    <!-- Result -->
    <div id="result"></div>

    <script>
        $(document).ready(function () {
            // Show loader when any AJAX request starts
            $(document).ajaxStart(function () {
                $("#loader").fadeIn();
            });

            // Hide loader when all AJAX requests finish
            $(document).ajaxStop(function () {
                $("#loader").fadeOut();
            });

            // Button click triggers an AJAX request
            $("#loadData").click(function () {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1&quot;,
                    method: "GET",
                    success: function (data) {
                        $("#result").html(
                            "<h3>" + data.title + "</h3><p>" + data.body + "</p>"
                        );
                    }
                });
            });
        });
    </script>