通过jQuery on()在第一级保留自定义属性来捕获Java脚本CustomEvent

理论上我有一个这样的设置[请参阅小提琴-&>http://jsfiddle.net/GeZyw/]：

var EventTest = function(element) {
    this.element = element;
    this.element.addEventListener('click', elementClick);
    
    function elementClick() {
        var event = document.createEvent('CustomEvent');
        event.initEvent('myevent', false, false);
        event['xyz']='abc';
        event.customData='test';
        console.log(event);
        this.dispatchEvent(event);
    }
}

var element = document.getElementById('test');
var test = new EventTest(element);

$(document).ready(function() {
    $("#test").on('myevent', function(e) {
        console.log('myevent', e);
    });
}); 

我想要的是在纯Java脚本中创建一个CustomEvent，用一些属性丰富它，并触发该事件，这样它也可以被jQuery这样的库缓存。

正如您在小提琴中看到的那样，CustomEvent被很好地触发，并且实际上填充了定制属性-但是当它到达jQueryon()时，定制属性从第一级消失了。我的自定义属性现在降级为e.originalEvent.xyz，依此类推。

这不是很令人满意。我希望至少我自己的属性处于第一级。

也，在理想的情况下，我希望去掉分派事件中的大多数标准属性，因此它包含(理论上最优的)：

e = {
  xyz : 'abc',
  customData : 'test'
}

这有可能吗？如果是，我应该如何做？

---

解决方案

几个月前我也遇到过同样的问题，问题是：

当jQuery接收到事件时，它会在将事件调度到已注册的事件处理程序之前正常化事件属性。

还有：

事件处理程序将不会接收原始事件。相反，他们将获得一个新的jQuery.Event对象，其中的属性是从原始的HTML事件复制的。

为什么jQuery要这样做：

因为它无法设置原始HTML事件的属性。

我决定做同样的事情，我开始用一种令人讨厌的方式，结果我的代码变得如此混乱，最后我决定使用jQuery.rigger解决方案，并将我的事件对象作为第二个参数传递，如下所示：

$("#test").bind("myevent", function(e, myeventobj) { 
    alert(myeventobj.xyz);
});
var myobj = {"xyz":"abc"};
$("#test").trigger("myevent", myobj);

有关更多信息，请查看此链接：.trigger()