Bạn có thể đặt event.data với kích hoạt jquery

Question

Với jquery .on() bạn có thể chuyển một tham số tùy chọn để đặt dữ liệu sự kiện. Bạn có thể làm điều này với kích hoạt không?

Answer 1

Tôi hy vọng tôi không hiểu sai nhưng bạn có nghĩa là chuyển dữ liệu bổ sung bằng phương thức trigger?

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

Và ở một nơi khác ...

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

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

Lưu ý rằng nếu bạn vượt qua dữ liệu bổ sung với trigger, tham số đầu tiên của bạn trong hàm callback luôn là sự kiện thực tế bạn đang kích hoạt.

app.Model Tôi đã sử dụng trong dấu ngoặc đơn là đối tượng sẽ kích hoạt sự kiện và cũng sẽ lắng nghe sự kiện đó. Hãy nghĩ về nó như một loại không gian tên. Bạn luôn có thể sử dụng document, bất kỳ công cụ chọn DOM nào hoặc thậm chí đối tượng bạn thích, chỉ cần đảm bảo rằng cả hai trigger và on phải sử dụng đối tượng cùng một đối tượng (tức là DOM tạm thời bị xóa khỏi DOM) .

Answer 2

Bạn có thể làm theo cách này: -

Ví dụ

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

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

Bạn có thể vượt qua event.data quá với phương pháp tương tự. Tham khảo này Event Object

Answer 3

Có. Các tài liệu cho biết:

.trigger (eventType [, extraParameters])

Lưu ý sự khác biệt giữa các thông số phụ chúng tôi đang đi qua đây và eventData tham số cho phương thức .bind(). Cả hai đều là cơ chế truyền thông tin tới trình xử lý sự kiện, nhưng đối số extraParameters cho .trigger() cho phép thông tin được xác định tại thời điểm sự kiện được kích hoạt, trong khi đối số eventData đến .bind() yêu cầu thông tin phải được tính tại thời điểm trình xử lý bị ràng buộc .

Answer 4

Tôi biết một workaround chúng ta có thể sử dụng cho điều này

$("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"); 

Đây là một demo

Answer 5

Trong trang web jQuery bạn sẽ nhìn thấy lời tuyên bố cho trigger chức năng: .trigger(eventType [, extraParameters])

Các extraParameters phải là một mảng hoặc một đối tượng duy nhất và bạn sẽ được phép nhận các đối tượng này với các đối số [1+] (đối số [0] là bằng đối tượng sự kiện).

Vì vậy, đây là một ví dụ:

$('#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 6

Theo như tôi biết, cùng dataObject mà bạn định nghĩa với bản gốc:

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

cũng sẽ được gửi đi khi bạn sử dụng `$ (trình kích hoạt 'selector') ('eventName').

bạn cũng có thể chuyển tham số (như các đề cập khác trong câu trả lời của họ) nhưng các tham số đó sẽ là đối số bổ sung (bạn vẫn sẽ có dataObject bạn đặt ở hàm .on()).

Answer 7

Đây là phương pháp tôi đã thực hiện.

$('#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 8

ngắn Trả lời:

Can kích hoạt() qua dữ liệu để xử lý sự kiện của bạn? Có (làm thông số bổ sung)

Có thể kích hoạt() chuyển dữ liệu vào đối tượng event.data trực tiếp? Không (chỉ trên() thực hiện điều này)

// 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) {...}); 

dài trả lời

Phương pháp kích hoạt() làm 5 điều chính.

1. Nó tạo ra một JQueryEventObject với loại và không gian tên tùy chọn bạn cho nó
2. Nó gửi hoặc phát ra một sự kiện của một loại cụ thể mà đi lên DOM cho đến khi nó đạt đến đỉnh hoặc tuyên truyền của nó được dừng lại.
3. Nó xác định chữ ký của trình xử lý sự kiện cho loại sự kiện đó.
   • function (event) {...} là mặc định
4. Nó vượt qua sự kiện như các tham số đầu tiên cho những bộ xử lý
5. Nó (tùy chọn) đi tham số bổ sung cho bất kỳ bộ xử lý sự kiện
   • chức năng (sự kiện, additionalParams) {}

Số 3 và 5 là quan trọng nhất và phù hợp với bạn. Vì bạn xác định rõ ràng api để xử lý sự kiện này, bạn muốn nhất quán với cách bạn kích hoạt sự kiện để những người sử dụng mã của bạn có thể nhất quán với cách họ sử dụng nó.

Ví dụ 1 quán

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

Ví dụ 2 Dưới đây là ví dụ điển hình cho thấy cả hai kích hoạt() và 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']); 

Vì vậy, chỉ cần nhớ.

• .trigger(): phát ra sự kiện này và xác định tham số 2, 3, vv liên tục nếu cần
• .Trên(): Sự kiện này được bọt lên dom. làm một số nội dung, thêm vào hoặc sử dụng dữ liệu sự kiện và sử dụng các thông số bổ sung kích hoạt được thêm vào hay không.

Answer 9

Tôi mất một thời gian để hiểu triết lý đằng sau điều này. Một sự kiện liên quan đến hai thực thể: người nghe và người điều phối. Trường event.data được dự định chỉ được người nghe sử dụng. Nó giống như chỉ định tên cho một số điện thoại:

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

Bạn có thể nhấc điện thoại lên và đợi bên kia cho bạn biết rằng cô ấy là mẹ của bạn. Hoặc bạn có thể sử dụng event.data để đính kèm thông tin bổ sung liên quan đến sự kiện này.

Các phương thức $.trigger và $.triggerHandler được gọi bởi bên điều phối của sự kiện. Đó là lý do tại sao họ không cho phép bạn chỉ định event.data. Thay vào đó, bạn có thể sử dụng đối số extraParameters của chúng.

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