jquery - Javascript inline function call -

i have question inline function call in javascript.

this example works:

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

while not working:

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

my question - why second case not working , first 1 does?

i've come accross issue, using jquery-ui droppable:

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

droppable using syntax (without function()). why that?

lets break down sample sample

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

this same doing following in pure javascript.

document.queryselector('button').addeventlistener('click', function() {   {     alert($(this).text());   } }); 

it's bit weird add braces allowed , code within executed. second sample gets weird though.

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

this same this.

document.queryselector('button').addeventlistener('click', function() {   function() {     alert($(this).text());   } }); 

in other words, when click on button you'll declare new function you'll never call it. around need wrap in paranthesis , call .call(this) on function execute same this caller.

document.queryselector('button').addeventlistener('click', function() {   (function() {     alert($(this).text());   }).call(this); }); 

or in style.

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