如何用jQuery Event对象填充event.data？设置后仍返回undefined求助

嘿，我明白你遇到的问题了——你想给自定义的jQuery Event对象设置data属性，但它总是返回undefined，而pageX这类属性却能正常工作。这其实是因为jQuery对data这个属性有特殊的内置用途，不是你想的那样随便可以赋值的。

为什么data属性不生效？ #

jQuery Event对象里的data是预留属性，它专门用来存储事件绑定阶段传递的数据。举个例子：

// 绑定事件时传入data，handler里的e.data会拿到这个对象
$('body').on('click', {foo: 'original'}, function(e) {
  console.log(e.data); // 输出 {foo: 'original'}
});

当你用jQuery.Event()构造自定义事件时，即使你设置了data属性，在触发事件的过程中，jQuery会自动把这个属性替换成绑定阶段传入的数据（如果有的话）；如果没有绑定数据，就会设为undefined——这就是你看到的结果。

而你设置的data123能正常生效，是因为它是自定义属性，jQuery不会对这类属性做特殊处理。

两种可行的解决方案 #

根据你的需求，这里有两种常用的解决办法：

1. 使用自定义属性名代替data

既然data被占用了，换个名字就好，比如customData或者你之前用的data123：

$('body').on('click', function(e){ 
  console.log(e.pageX); // 输出 64
  console.log(e.customData); // 输出 {foo: true}
}); 

// 创建事件对象时使用自定义属性
var e = jQuery.Event( "click", { 
  pageX: 64, 
  customData: {'foo': true} 
} ); 

$("body").trigger( e );

2. 通过trigger方法的第二个参数传递数据

如果你更倾向于规范的事件数据传递方式，可以在触发事件时，把数据作为trigger的第二个参数传入：

$('body').on('click', function(e, data){ 
  console.log(e.pageX); // 输出 64
  console.log(data); // 输出 {foo: true}
}); 

// 只设置非预留的事件属性
var e = jQuery.Event( "click", { pageX: 64 } ); 

// 触发时传递数据，注意要放在数组里
$("body").trigger( e, [{'foo': true}] );

这样就能完美实现你想要的“给事件附加自定义数据”的需求啦～

内容的提问来源于stack exchange，提问作者Mr. CC