为什么jQuery的trigger函数会丢失数组元素？如何解决该问题？

问题原因 #

jQuery的trigger()方法接收的第二个参数是额外参数数组，数组内的每一个元素都会被作为独立的参数依次传递给事件监听回调，而不是把整个数组作为单个参数传递。你当前传的[1,2]会被拆成两个独立参数传给回调，你只接收了第二个位置的参数，所以只能拿到1，第三个位置的2就被遗漏了。

修复方案 #

方案1：给要传递的数组额外套一层数组 #

把你要传递的数组作为外层数组的唯一元素，这样传递时整个数组就会被作为第二个参数完整传入：

$(function() {
    $('#click').click(function() {
    // 外层多套一层数组
    $(document).trigger('clicked', [[1,2]]);
  })
  
  $(document).on('clicked', function(event, data){
    console.log(data); // 输出 [1,2]
  });
})

方案2：在回调中用剩余参数接收所有额外参数 #

如果不想修改trigger传参的写法，可以直接在事件回调里用剩余参数语法接收所有拆分的额外参数，自动组合成数组：

$(function() {
    $('#click').click(function() {
    $(document).trigger('clicked', [1,2]);
  })
  
  // 用剩余参数...data接收所有额外传递的参数
  $(document).on('clicked', function(event, ...data){
    console.log(data); // 输出 [1,2]
  });
})

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