jQuery nhiều sự kiện để kích hoạt cùng một chức năng

Có cách nào để có keyup, keypress, blur, và changecác sự kiện gọi hàm tương tự trong một dòng hay tôi phải làm một cách riêng biệt?

Vấn đề tôi gặp phải là tôi cần xác thực một số dữ liệu bằng tra cứu db và muốn đảm bảo xác thực không bị bỏ sót trong mọi trường hợp, cho dù nó được nhập hoặc dán vào hộp.

Bạn có thể sử dụng .on()để liên kết một chức năng với nhiều sự kiện:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Hoặc chỉ truyền hàm dưới dạng tham số cho các hàm sự kiện thông thường:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Kể từ jQuery 1.7, .on()phương thức này là phương thức ưa thích để đính kèm các trình xử lý sự kiện vào tài liệu. Đối với các phiên bản trước, .bind()phương thức được sử dụng để đính kèm một trình xử lý sự kiện trực tiếp vào các phần tử.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Tôi đang tìm cách để có được loại sự kiện khi jQuery lắng nghe một số sự kiện cùng một lúc và Google đưa tôi đến đây.

Vì vậy, đối với những người quan tâm, event.typelà câu trả lời của tôi:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Thêm thông tin trong tài liệu jQuery .

Bạn có thể sử dụng phương thức liên kết để gắn chức năng cho một số sự kiện. Chỉ cần chuyển tên sự kiện và hàm xử lý như trong mã này:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Một lựa chọn khác là sử dụng chuỗi hỗ trợ của jquery api.

Nếu bạn đính kèm cùng một trình xử lý sự kiện vào một số sự kiện, bạn thường gặp phải vấn đề nhiều hơn một trong số chúng bắn cùng một lúc (ví dụ: người dùng nhấn tab sau khi chỉnh sửa; nhấn phím, thay đổi và làm mờ tất cả có thể kích hoạt).

Nghe có vẻ như những gì bạn thực sự muốn là một cái gì đó như thế này:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

Đây là cách tôi làm điều đó.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

Bạn có thể xác định chức năng mà bạn muốn sử dụng lại như dưới đây:

var foo = function() {...}

Và sau này, bạn có thể đặt tuy nhiên nhiều trình lắng nghe sự kiện bạn muốn trên đối tượng của mình để kích hoạt chức năng đó bằng cách sử dụng ('event') để lại một khoảng trắng ở giữa như được hiển thị bên dưới:

$('#selector').on('keyup keypress blur change paste cut', foo);

Câu trả lời của Tatu là cách tôi trực giác thực hiện nó, nhưng tôi đã gặp một số vấn đề trong Internet Explorer với cách lồng / ràng buộc các sự kiện này, mặc dù nó được thực hiện thông qua .on()phương thức.

Tôi không thể xác định chính xác phiên bản jQuery nào là vấn đề này. Nhưng đôi khi tôi thấy vấn đề trong các phiên bản sau:

• 2.0.2
• 1.10.1
• 1.6.4
• Di động 1.3.0b1
• Di động 1.4.2
• Di động 1.2.0

Cách giải quyết của tôi trước tiên là xác định hàm,

function myFunction() {
    ...
}

và sau đó xử lý các sự kiện riêng lẻ

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Đây không phải là giải pháp đẹp nhất, nhưng nó hiệu quả với tôi và tôi nghĩ rằng tôi sẽ đưa nó ra ngoài để giúp đỡ những người khác có thể vấp phải vấn đề này

$("element").on("event1 event2 event..n", function() {
   //execution
});

Hướng dẫn này là về xử lý nhiều sự kiện.

Có cách nào để có keyup, keypress, blur, và changecác sự kiện gọi hàm tương tự trong một dòng?

Có thể sử dụng .on(), chấp nhận cấu trúc sau : .on( events [, selector ] [, data ], handler ), vì vậy bạn có thể truyền nhiều sự kiện cho phương thức này. Trong trường hợp của bạn, nó sẽ trông như thế này:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

Và đây là ví dụ trực tiếp:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

Thật đơn giản để thực hiện điều này với các phương thức DOM tích hợp mà không cần một thư viện lớn như jQuery, nếu bạn muốn, chỉ cần thêm một chút mã - lặp lại qua một loạt các tên sự kiện và thêm một trình nghe cho mỗi:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});