Question

我理论上有这样的设置[见小提琴 - ＆gt; 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);
    });
});

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

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

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

同样，在一个完美的世界中，我想摆脱调度事件中的大多数标准属性，因此它包含（理论上最优）：

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

这有可能吗？如果是这样，我该怎么做？

Answer 1

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

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

还有：

事件处理程序不会收到原始事件。相反，他们正在获取一个新的jQuery.Event对象，其中包含从原始HTML事件中复制的属性。

为什么jQuery会这样做：

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

我决定这样做，我开始以一种令人讨厌的方式做到这一点，我的代码最终变得如此混乱，最后我决定使用jQuery.trigger解决方案，并将我的事件对象作为第二个参数传递，像：

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

有关详情，请查看此链接： .trigger()

通过jQuery捕获Javascript CustomEvent（）在第一个“级别”保留自定义属性

1 个答案: