你可以用jQuery触发器设置event.data吗 [英] Can you set event.data with jquery trigger

问题描述

使用jQuery .on()，您可以传递一个可选参数来设置事件数据.您也可以使用触发器来执行此操作吗?

With jQuery .on() you can pass an optional parameter to set the event data. Can you do this with trigger as well?

推荐答案

简短答案:

trigger()是否可以将数据传递给事件处理程序? 是(作为其他参数)

Short Answer:

Can trigger() pass data to your event handlers? Yes (as additional parameters)

trigger()是否可以将数据直接传递到event.data对象中? 否(仅 on()执行此操作)

Can trigger() pass data into the event.data object directly? No (only on() does this)

// 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()方法做五件事.

1. 它将使用您为其提供的类型和可选名称空间创建一个JQueryEventObject
2. 它发送或发出特定类型的事件，该事件沿DOM传播直至到达顶部或停止传播.
3. 它为该类型的事件定义事件处理程序的签名.
   • function(event){...}是默认

1. It creates a JQueryEventObject with the type and optional namespace you give it
2. It sends or emits an event of a specific type that travels up the DOM until it reaches the top or its propagation is stopped.
3. It defines the signature of event handlers for that type of event.
   • function(event) {...} is the default

• function(event，AdditionalParams){}

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

Numbers 3 and 5 are most important and relevant to you. Since you implicitly define the api for handling this event, you want to be consistent with how you trigger events so that people who use your code can be consistent with how they use it.

示例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()的典型示例:

Example 2 Here is the typical example showing both trigger() and 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():事件使dom起泡.做一些事情，添加或使用事件数据，并使用触发添加或不添加的额外参数.

• .trigger(): emit the event and define parameter 2, 3, etc consistently if needed

• .on(): event is bubbling up the dom. do some stuff, add to or use event data and use the extra params that trigger added or not.

Tangent:如果要为可以任意添加或删除的动态元素定义事件处理程序，则使用jQuery非常简单.看到以下答案:在jQuery中，如何将事件附加到动态html元素?

Tangent: If you want to define event handlers for dynamic elements that can be added or removed arbitrarily, this is very easy with jQuery. See this answer: In jQuery, how to attach events to dynamic html elements?

这篇关于你可以用jQuery触发器设置event.data吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！