19

Hết sức tò mò - mục đích/trường hợp sử dụng cho jQuery là gì triggerHandler? Theo như tôi có thể nói, sự khác biệt "thực" duy nhất giữa triggertriggerHandler là liệu sự kiện gốc có cháy hay không và hành vi bong bóng của sự kiện (mặc dù hành vi sủi bọt của triggerHandler không khó để sao chép với trigger trong một vài dòng mã). Lợi thế để đảm bảo sự kiện bản địa không cháy là gì?triggerHandler so với kích hoạt trong jQuery

Tôi rất tò mò nếu đây là một chức năng tiện lợi hoặc có lý do sâu sắc hơn, và lý do tại sao/khi nào tôi sẽ sử dụng nó.

Trả lời

57

Từ Documents tại http://api.jquery.com/triggerHandler/

Phương pháp .triggerHandler() xử tương tự như .trigger(), với ngoại lệ sau:

  • The() phương pháp .triggerHandler không gây ra hành vi mặc định của sự kiện xảy ra (chẳng hạn như biểu mẫu gửi).

Không ngăn tác vụ trình duyệt mặc định cho phép bạn chỉ định hành động tập trung hoặc chọn, v.v ..., áp dụng kiểu. Có thể bạn có một menu động dựa trên Javascript, vì vậy bạn không muốn áp dụng phong cách thuần túy với CSS nếu không những người có Javascript bị vô hiệu hóa sẽ không hiểu tại sao bố cục trông lạ. Bạn có thể sử dụng giống như $('menu1select').triggerHandler('click');

  • Trong khi .trigger() sẽ hoạt động trên tất cả các yếu tố kết hợp bởi các đối tượng jQuery , .triggerHandler() chỉ ảnh hưởng đến các yếu tố phù hợp đầu tiên.

Nếu bạn có một sự kiện mà giấu một yếu tố onclick ví dụ, và bạn muốn gọi là chức năng thông thường, thay vì phải xác định từng yếu tố, bạn có thể sử dụng $('.menu').triggerHandler('click');

  • tạo các sự kiện với .triggerHandler() không bong bóng lên hệ thống phân cấp DOM; nếu chúng không trực tiếp xử lý trực tiếp trực tiếp phần tử đích, chúng sẽ không làm gì cả.

Ngăn chặn tuyên truyền, hopyfully không cần phải giải thích điều này một ...

  • Thay vì trả lại đối tượng jQuery (để cho phép chaining), .triggerHandler() trả về bất kỳ Giá trị đã được trả lại bởi lần xử lý cuối cùng nó được thực hiện. Nếu không có xử lý được kích hoạt, nó sẽ trả không xác định

Cái này nên tự giải thích cũng ...

+0

Tài liệu là lý do tôi đặt câu hỏi ngay từ đầu. Tôi hiểu hành vi, nhưng tôi tò mò nếu đây là một chức năng thuận tiện hoặc có một lý do sâu sắc hơn nó tồn tại. –

+1

Bạn nghiêm túc bị bỏ phiếu vì bạn không hiểu các ví dụ được đưa ra trong tài liệu. Được rồi, hãy để tôi đánh vần nó cho bạn sau đó. – Robert

+5

Bạn không cần phải upvote, bạn chỉ có thể không bỏ phiếu ở tất cả ... Tôi đã cho bạn nhiều ví dụ và bạn vẫn không hiểu, đó không phải là lỗi của tôi. Trong một số trường hợp, bạn không muốn trả về false trên một nhấp chuột thực tế, vì vậy # 1 là hợp lệ. # 2 Vâng ... đó là điểm, chỉ ẩn một, nhưng gọi toàn bộ mảng phù hợp. Vì vậy, bạn có thể setInterval rằng chức năng để tăng ẩn # 3 Xem # 1, với ý tưởng của bạn muốn hành động khác nhau dựa trên nhấp chuột thực tế vs mô phỏng. # 4 Nếu bạn muốn giá trị được trả lại bởi sự kiện thực tế cuối cùng mà không tạo một sự kiện mới. – Robert

1

Lợi thế để đảm bảo sự kiện gốc không kích hoạt là gì?

  • Bạn có những hành động liên kết với một sự kiện 'tập trung' nhưng bạn không muốn trình duyệt để tập trung thực sự tập trung vào nó (có vẻ ngớ ngẩn nhưng nó có thể xảy ra, không thể không? Giống như một mã mà bạn muốn thực hiện một lần mà không làm mất tiêu điểm hiện tại).

  • Một thành phần mà bạn đang thực hiện muốn kích hoạt 'tải' (chỉ là một ví dụ về một điều chung) của một thành phần bên trong nó.

    Trong trường hợp đó, nếu bạn đang gọi 'tải' trẻ em khi 'tải' của phụ huynh đến, bạn không muốn làm điều này vì nó sẽ gây ra một cuộc gọi vô hạn nếu event.stopPropagation không được gọi bởi các thính giả của sự kiện 'tải' (do bubling):

$container.on('load', function() { 
    $somethingInsideContainer.trigger('load'); 
    // Would cause a loop if no event.stopPropagation() is called 
}); 

trong trường hợp đó bạn phải gọi triggerHandler().

1

Sự khác biệt 1: bạn có thể gọi tất cả các phần tử được đối tượng JQuery khớp với trình kích hoạt.

// Ví dụ1 để kích hoạt. Tất cả 3 sự kiện nhấp nút được kích hoạt khi được kích hoạt. // Thử Thay thế phương thức kích hoạt bằng triggerHandler(). Bạn sẽ chỉ thấy trình xử lý sự kiện thành phần nút đầu tiên sẽ kích hoạt.

<button id = "button1">button1</button> 
<button id = "button2">button2</button> 
<button id = "button3">button3</button> 

$("#button1").on("click", function(){ 
alert("button1 clicked"); 
}); 
$("#button2").on("click", function(){ 
alert("button2 clicked"); 
}); 
$("#button3").on("click", function(){ 
alert("button3 clicked"); 
}); 

// thay thế kích hoạt với triggerHandler để thấy sự khác biệt

$("#button1, #button2, #button3").trigger("click"); 

Difference 2: khi sử dụng triggerHandler() cho một sự kiện yếu tố, sự kiện có nguồn gốc sẽ không được gọi cho các phần tử đó. trigger() sẽ hoạt động tốt.

// Ví dụ:

// thay thế kích hoạt với triggerHandler để thấy sự khác biệt

<button id = "button1">button1</button> 
    <button id = "button2">button2</button> 

$("#button1").on("click", function(){ 
$("#button2").trigger('click'); 

}); 

$("#button3").on("click", function(){ 
var value = $("#button2").triggerHandler('click'); 
    alert('my value:'+ value) 
}); 

$("#button2").on('click', function(){ 
alert("button2 clicked"); 

}); 

Difference 3: kích hoạt() trả về đối tượng jquery trong khi triggerHandler() trả về giá trị xử lý cuối cùng hoặc Nếu không có trình xử lý nào được kích hoạt, nó sẽ trả về undefined

// Example3

<button id="button1">Button1</button> 
<button id="button2">Button2</button> 
<button id="button3">Button3</button> 


$("#button1").on("click", function(){ 
var myValue = $("#button2").trigger('click'); 
    alert(myValue); 
}); 

$("#button3").on("click", function(){ 
var value = $("#button2").triggerHandler('click'); 
    alert('my value:'+ value) 
}); 

$("#button2").on('click', function(){ 
alert("button2 clicked"); 
    return true; 
}); 

Sự khác biệt khác là

Sự kiện được kích hoạt bằng triggerHandler() không làm bong bóng phân cấp DOM; nếu chúng không được xử lý trực tiếp bởi phần tử đích, chúng sẽ không làm gì cả.

0

Đối với tôi, điểm khác biệt chính là 'triggerHandler' trả về bất kỳ thứ gì được trả về bởi trình xử lý cuối cùng, trong khi 'trigger' trả về đối tượng jQuery.

Vì vậy, đối với một bộ xử lý như:

$(document).on('testevent', function() 
    { 
    return false; 
    }); 

Sử dụng 'triggerHandler' bạn có thể làm như sau:

if($(document).triggerHandler('testevent') === false) 
    { 
    return; 
    } 

Vì vậy, bạn sẽ sử dụng 'triggerHandler' nếu bạn muốn để đáp ứng các kết quả trả về từ trình xử lý.

Các vấn đề liên quan