Why does jQuery triggers load event for dynamically loaded css files, but not for javascript files?

Question

Consider the following codes:

Load JS

$( "<script src=\"test.js\"><\/script>" ).on( "load",
    function() {
        console.log( "JS LOADED" );
    }
).appendTo( $( "head" ) );

Load CSS

$( "<link rel=\"stylesheet\" href=\"test.css\" />" ).on( "load",
    function() {
        console.log( "CSS LOADED" );
    }
).appendTo( $( "head" ) );

Can someone please explain me why the load event will not trigger for the js file. And what should be done to make it work ?