Javascript inline function call

Question

I have a question about inline function call in javascript.

This example works:

<button onclick="{alert($(this).text());}">Testing</button>

While this is not working:

<button onclick="function(){alert($(this).text());}">Testing</button>

My question is - why is the second case not working and the first one does?

I've come accross this issue, using jQuery-UI droppable:

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Droppable is also using this syntax (without function()). Why is that?

Answer 1

<button onclick="function(){alert($(this).text());}">Testing</button>

That is equivalent to:

yourButton.addEventListener("click", function(){
    function(){
        alert($(this).text());
    };
});

Can you see why it's not working now?