Javascript内联函数调用

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?

Answer 2

example 1

Your passing statement. So it's working.

example 2

Your passing callback function. Javascript onclick doesn't support callback.

About droppable, droppable is a jquery plugin so it will support callback function.

Answer 3

Because the brackets are superfluous, and likely being ignored:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="alert($(this).text());">Testing</button> 

If you want to encapsulate it in a function and run it as such, I suppose it would need to be self-invoking:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="(function(){alert($(this).text());})();">Testing</button> 

But then the this value gets unbound.

The droppable syntax is something completely different-- you can think of it like this:

var configObj = { // this isn't a function, it's a config object
  drop: function( event, ui ) {}  // this is a function value of the property drop
}
$( ".selector" ).droppable(configObj);

Answer 4

Lets break this down sample by sample

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

This would be same as doing the following in pure javascript.

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

It's a bit weird to add extra braces like that but it is fully allowed and the code within will be executed. For your second sample this gets really weird though.

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

This would be the same as this.

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

In other words, when you click on the button you'll declare a new function but you'll never call it. To get around this you would need to wrap it in paranthesis and then call .call(this) on the function to execute with the same this as the caller.

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

Or in your style.

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