如何使用jQuery为目标元素绑定drop事件及回调传参问题

你不需要手动传参的本质是：你传给bind()的是函数引用，不是即时执行的函数调用结果，参数会在事件实际触发时由jQuery内部自动传入。

具体逻辑拆解 #

• 当你写changeTarget（不带括号）时，你是把changeTarget这个函数本身的地址交给jQuery的事件管理系统存起来，而不是当场把这个函数跑一遍。这时候jQuery只需要记住「drop事件触发时要调用这个函数」，不需要你提前给参数。
• 等用户真的在#target元素上完成拖拽释放动作、触发drop事件时，负责事件派发的jQuery（你这里用的是带拖拽能力的jQuery UI）会自动按规则组装两个参数，按顺序塞进你存的回调函数里执行：
  1. 第一个参数是经过jQuery标准化的event事件对象，包含事件触发源、时间坐标、阻止默认行为/冒泡的方法等通用属性
  2. 第二个参数是jQuery UI拖拽组件专属的ui上下文对象，里面存了和本次拖拽相关的所有数据，也就是你代码里用到的ui.draggable（被拖拽的jQuery元素对象）的来源。

常见误区提醒 #

如果你绑定的时候手滑给函数加了括号，写成$("#target").bind("drop", changeTarget());，反而会出问题：

这行代码执行时就会立刻调用changeTarget函数，因为你没手动传参，函数内部拿到的event和ui都会是undefined；同时函数执行后的返回值（你当前的函数没有写return，返回值是undefined）会被注册为事件回调，等真正的drop事件触发时，没有任何有效逻辑会执行。

如果确实需要给回调传入自定义的额外参数，可以用匿名函数包裹一层再传，写法参考：

$("#target").bind("drop", function(event, ui) {
  // 自动注入的event、ui照常传，额外加你需要的自定义参数
  changeTarget(event, ui, "自定义参数1", "自定义参数2");
});

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