为何直接传入thisAnimate函数到jQuery on点击事件不生效？

嘿，这个问题其实戳中了JavaScript里函数引用和立即执行的核心区别，咱们来一步步理清楚：

先看你无法运行的代码问题出在哪 #

var element = $(this);
element.on( 'click', thisAnimate(element));

这里的thisAnimate(element)是立即执行函数调用——代码运行到这一行的时候，会立刻执行thisAnimate函数，然后把它的返回值（如果函数没写return，就是undefined）传给jQuery的on方法。

但jQuery的on方法需要的是一个函数引用（简单说就是告诉它：“等点击事件发生的时候，你再去调用这个函数”），而不是一个已经执行完的结果。你传个undefined进去，点击自然不会有任何反应啦。

再看为什么包裹在匿名函数里就正常 #

var element = $(this);
element.on( 'click', function() { thisAnimate(element); });

这里你传给on的是一个匿名函数的引用，这个函数本身不会立刻执行。只有当元素被点击时，jQuery才会调用这个匿名函数，然后在函数内部才去执行thisAnimate(element)——这才是符合“点击时触发动画”的逻辑。

额外给你两种更优雅的写法 #

如果想避免用匿名函数包裹，还有两种常见方式：

1. 让thisAnimate直接使用事件上下文的this
   调整你的自定义函数，让它能通过事件触发时的this获取目标元素：

   function thisAnimate() {
     var element = $(this); // 这里的this就是被点击的DOM元素
     // 你的动画逻辑
   }
   // 直接传函数引用，不带括号！
   $(this).on('click', thisAnimate);
   

2. 用bind绑定参数
   如果一定要提前把element传给thisAnimate，可以用Function.prototype.bind生成一个绑定了参数的新函数：

   var element = $(this);
   element.on('click', thisAnimate.bind(null, element));
   

   bind会返回一个新函数，当点击触发时，这个新函数会自动把element作为第一个参数传给thisAnimate。

核心总结 #

• 给on方法传回调时，要传函数本身（不带括号），这样jQuery才能在事件触发时调用它。
• 带括号的写法是立即执行函数，会直接运行并把结果传给on，这不是事件回调该有的写法。

内容的提问来源于stack exchange，提问作者Cory Nickerson