你能用jquery触发器设置event.data吗？

Question

使用jQuery,.on()您可以传递可选参数来设置事件数据.你能用触发器做到这一点吗？

Answer 1

简答:

可以触发()将数据传递给事件处理程序吗？是(作为附加参数)

可以触发()直接将数据传递到event.data对象吗？不(只有on()这样做)

// Using this will pass myData to every event handler as the second parameter. 
trigger('myEvent', [myData]) 
// Instead of this
on('myEvent', function(evt) {...});
// You would do this
on('myEvent', function(evt, myData) {...});

答案很长

trigger()方法做了5件主要的事情.

1. 它创建一个JQueryEventObject,其中包含您提供的类型和可选命名空间
2. 它发送或发出特定类型的事件,该事件沿DOM向上移动直到它到达顶部或其传播停止.
3. 它定义了该类事件的事件处理程序的签名.
   • function(event){...}是默认值
4. 它将事件作为第一个参数传递给这些处理程序
5. 它(可选)将其他参数传递给事件的任何处理程序
   • function(event,additionalParams){}

数字3和5是最重要的,与您相关.由于您隐式定义了用于处理此事件的api,因此您希望与触发事件的方式保持一致,以便使用您的代码的人员可以与他们使用它的方式保持一致.

示例1一致性

function Car(speed, tires, brakes) {
    this.speed = speed;
    this.tires = tires;
    this.brakes = brakes;
}

Car.prototype.brake = function(amount) {
    // You can do this (Event handler will have access to these parameters)
    car.trigger('brake.car', [this.speed, this.brakes, this.tires, amount])
    // Or this (Event handler will have access to these parameters)
    car.trigger('brake.car', [this, amount])
    // but try not to mix and match with the same event type
}
...
//This is the first way from above (choose one or the other, but don't mix and match).
passenger.on('brake.car', {person: passenger}, function(evt, carSpeed, carBrakes, carTires, brakeAmount){
    if(brakeAmount > 50)
        passenger.hangOnTight();
    }
})

...
// This is the second way from above (choose one or the other, but don't mix and match).
passenger.on('brake.car', function(evt, car, brakeAmount){
    if(brakeAmount > 50)
        passenger.hangOnTight();
    }
})

示例2以下是显示trigger()和on()的典型示例:

jQuery(document).on('eventName' {eventData1: 'foo', eventData2: 'bar'}, function (evt, extraParam1, extraParam2) {
    //This code runs when the event is triggered
    console.log(evt.data.eventData1) // foo
    console.log(evt.data.eventData2) // bar
    console.log(extraParam1) // 'extra param 1'
    console.log(extraParam2) // 'extra param 2'
});

jQuery(document).trigger('eventName', ['extra param 1', 'extra param 2']);

所以请记住.

• .trigger():如果需要,发出事件并一致地定义参数2,3等

• .on():事件正在冒泡.做一些事情,添加或使用事件数据并使用触发添加或不添加的额外参数.

• Tangent:如果要为可以任意添加或删除的动态元素定义事件处理程序,使用jQuery非常容易.看到这个答案:在jQuery中,如何将事件附加到动态html元素？

Answer 2

我希望我没有弄错你,但你的意思是通过该trigger方法传递额外的数据？

$(app.Model).trigger("foo", additionalData);

而在其他地方......

$(app.Model).on("foo", callback);

var callback = function(event, additionalData) {
   console.log(additionalData);
}

请注意,如果传递其他数据trigger,则回调函数中的第一个参数始终是您要触发的实际事件.

在app.Model括号中使用我是应该触发事件的对象,并且还侦听该事件.把它想象成一种命名空间.您可以随时使用document,任何DOM选择,甚至反对你喜欢,只要确保,无论是trigger和on必须使用相同的对象(即,从DOM移除DOM元素暂时是容易出错).

Answer 3

你可以这样做: -

例

  //Create a new jQuery.Event object without the "new" operator.
  var e = jQuery.Event("click");

  // trigger an artificial click event
  jQuery("body").trigger( e );

您也可以使用相同的方法传递event.data.请参阅此事件对象

Answer 4

这是我采取的方法.

$('#foo').on('click', { init: false }, function(e, data) {
        data = data || e.data;
        console.log(data.init); // will be true in the trigger, and false in the click.
    })
    .trigger('click', { init: true });