使用jQuery调用Bootstrap事件时，如何判断参数及解析参数内容

一、怎么判断事件处理函数是否需要参数 #

• 所有通过jQuery的on()绑定的事件处理函数，默认都会被传入一个jQuery事件对象，不管你写不写参数去接收它。
• 要不要写参数完全看你的需求：如果需要用到事件的相关信息（比如阻止默认行为、获取触发元素），就定义参数接收；如果不需要，直接写无参函数也能正常运行——JavaScript允许函数接收的参数数量少于实际传入的数量，不会报错。
• 对于像Bootstrap的show.bs.modal这类框架自定义事件，可以参考框架文档，这类事件通常会给事件对象添加额外属性（比如relatedTarget），需要时就接收参数来使用。

二、可以传入的参数内容 #

1. 固定的事件对象参数
   第一个参数是jQuery包装后的事件对象（通常命名为e），包含基础事件信息：

   • e.target：触发事件的DOM元素
   • e.type：事件类型（比如show.bs.modal）
   • e.preventDefault()：阻止事件的默认行为（部分事件有效，比如模态框的show.bs.modal调用后可以阻止模态框显示）
   • 框架自定义事件会扩展更多属性，比如Bootstrap模态框事件的e.relatedTarget，表示触发模态框显示的元素。

2. 自定义额外参数
   如果需要给处理函数传递自定义数据，可以在on()方法的第三个参数位置传入，这些数据会挂载到事件对象的data属性上：

   $("#id").on('show.bs.modal', {username: 'Amigo'}, function(e) {
     console.log(e.data.username); // 输出"Amigo"
   });
   

关于你给出的示例说明 #

你写的两种写法都能正常运行：

$("#id").on('show.bs.modal', function () { });
$("#id").on('show.bs.modal', function (e) { });

原因是jQuery会自动把事件对象传给处理函数，第一个写法只是没接收这个参数，不影响函数执行；第二个写法接收了参数，后续可以用这个事件对象做更多操作。

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