Javascript内联函数调用

Question

我有一个关于javascript内联函数调用的问题。

这个例子有效：

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

虽然这不起作用：

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

我的问题是 - 为什么第二种情况不起作用而第一种情况呢？

我使用jQuery-UI droppable来解决这个问题：

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

Droppable也使用这种语法（没有function() ）。 这是为什么？

Answer 1

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

这相当于：

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

你能明白为什么现在不行吗？

Answer 2

例1

你的传递声明。 所以它正在发挥作用。

例2

你的传递回调函数。 Javascript onclick不支持回调。

关于droppable，droppable是一个jquery插件，所以它将支持回调函数。

Answer 3

因为括号是多余的，可能会被忽略：

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

如果你想将它封装在一个函数中并像这样运行它，我想它需要自我调用：

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

但是this值得到了解除。

droppable语法完全不同 - 您可以这样想：

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

让我们按样品分解这个样品

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

这与在纯JavaScript中执行以下操作相同。

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

添加类似的额外大括号有点奇怪，但它是完全允许的，并且将执行其中的代码。 对于你的第二个样本，这变得非常奇怪。

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

这与此相同。

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

换句话说，当您单击按钮时，您将声明一个新功能，但您永远不会调用它。 为了解决这个问题，你需要将其包装在paranthesis，然后调用.call(this)在功能上具有相同执行this作为主叫方。

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

或者你的风格。

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