简答：

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件事。

它使用您提供的类型和可选命名空间创建一个JQueryEventObject
它发送或发出特定类型的事件，该事件沿DOM向上移动，直到它到达顶部或其传播停止。
它定义了该类事件的事件处理程序的签名。
- function（event）{...}是默认
它将事件作为第一个参数传递给那些处理程序
它（可选）将其他参数传递给事件的任何处理程序
- 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非常容易。请参阅此答案：In jQuery, how to attach events to dynamic html elements?

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。请参阅 Event Object

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 });

Answer 5

我知道我们可以使用的解决方法

$("button").on("click", function(event) {
   event.data = $(this).data('events'); // get the data value 
   alert(event.data); //use your data as you want
});


//Now set the data value and trigger
$("button").data('events','youreventsvalue').trigger("click");

这是demo

Answer 6

是。文档说：

.trigger（eventType [，extraParameters]）

请注意我们在此处传递的额外参数与eventData参数的.bind()参数之间的差异。两者都是将信息传递给事件处理程序的机制，但是extraParameters的{{1}}参数允许在触发事件时确定信息，而.trigger()参数设置为eventData要求在绑定处理程序时已经计算了信息。

Answer 7

在jQuery网站中，您可以看到trigger函数的声明：.trigger( eventType [, extraParameters] )

extraParameters必须是数组或单个对象，您将被允许使用参数[1+]获取这些对象（arguments [0]等于事件对象）。

所以，这是一个例子：

$('#foo').bind('custom', function(event) {
  if ( arguments.length > 1 ) {
    $.each(arguments, function(i,arg){
      alert("element " + i + " is " + arg);
    })
  }
});

$('#foo').trigger('custom', ['Custom', 'Event', { 'test' : 'attr from object' }, 123]);

Answer 8

据我所知，您使用原始版本定义的dataObject：

$('selector').on('eventName', dataObject , functionName)

当你使用`$（'selector'）时，也会发送

。触发器（'eventName'）。

您也可以传递参数（如答案中的其他提及），但这些参数将是其他参数（您仍然会在dataObject函数中设置.on()。

Answer 9

我花了一段时间才明白这背后的哲学。事件涉及两个实体：侦听器和调度器。 event.data字段仅供侦听器使用。这有点像为电话号码指定名称：

$("(818)548-2733").on("incomingcall", null, "Mom", pickup);

你可以拿起电话，等待对方告诉你她是你的妈妈。或者，您可以使用event.data附加与此活动相关的额外信息。

$.trigger和$.triggerHandler方法由事件的调度方调用。这就是他们不允许您指定event.data的原因。相反，您可以使用他们的extraParameters参数。

Answer 10

$("pressedButton").on("click", function(event) {
   var buttonID = $(this).data('buttonID');
   alert(buttonID); // alerts 'save' string passed as an argument
});

$("pressedButton").data('buttonID','save').trigger("click");

Answer 11

你可以这样做

  <input id="btn" type="button" />
    <input id="btn2" type="button" />
    $("#btn").bind("click",function(e) {
        var data2 = {type:"click",name:"Raptors",sport:"basketball"};
        $("#btn2").trigger(data2);
    });
    $("#btn2").bind("click",function(e) {
       console.log(e.name + " " + e.sport);
    });

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

11 个答案:

简答：

长答案