Phương thức on

Phương thức on cho phép thêm trình xử lý sự kiện vào phần tử. Để xóa trình xử lý có thể sử dụng phương thức off, để sự kiện chỉ kích hoạt một lần, sau đó trình xử lý tự xóa chính nó - hãy sử dụng phương thức one. Các phần tử mà chúng ta gắn trình xử lý phải tồn tại tại thời điểm gọi on.

Cú pháp

Chúng ta thêm trình xử lý sự kiện vào phần tử như thế này, tham số đầu tiên được truyền dưới dạng chuỗi là một hoặc nhiều sự kiện phân cách bằng dấu cách, tham số thứ hai là bộ chọn lọc (selector) bổ sung để lọc các phần tử con bên trong phần tử, tham số thứ ba - dữ liệu bổ sung, được truyền vào trình xử lý trong thuộc tính event.data khi sự kiện kích hoạt. Tham số thứ hai và thứ ba là tùy chọn. Tham số thứ tư truyền hàm xử lý, nhận đối tượng sự kiện và các tham số bổ sung tùy chọn. Nếu thay vì hàm xử lý mà truyền false, thì hàm sẽ chỉ trả về false:

$(selector).on(sự kiện, [selector], [dữ liệu], hàm-xử-lý(đối tượng sự kiện, [các tham số bổ sung]));

Có thể sử dụng phương thức on theo cách khác, khi đó tham số đầu tiên được truyền là một đối tượng JavaScript, trong đó các khóa - loại sự kiện, còn giá trị - các hàm xử lý, được gọi cho các sự kiện:

$(selector).on({'loại sự kiện': handler}, [selector], [dữ liệu]);

Nếu chúng ta không truyền selector bổ sung, thì sự kiện kích hoạt trên phần tử mà chúng ta gắn trình xử lý, ngược lại - trên phần tử con, phần tử mà phù hợp với selector đó (sự kiện ủy quyền). Một trình xử lý sự kiện giống nhau có thể được gắn vào phần tử nhiều lần.

Ví dụ

Hãy hiển thị trong alert, văn bản của đoạn văn có #test khi nhấp vào nó, nhấp vào các đoạn văn khác sẽ không dẫn đến điều gì:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Ví dụ

Hãy hiển thị dữ liệu mà chúng ta truyền vào phương thức on khi nhấp vào đoạn văn. Sử dụng hàm xử lý testFunc, mà chúng ta đã tạo:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Xem thêm

phương thức off,
cho phép xóa trình xử lý sự kiện khỏi phần tử
phương thức one,
cho phép sự kiện kích hoạt một lần, sau đó tự động xóa trình xử lý
đối tượng event,
chứa thông tin về sự kiện
phương thức trigger,
cho phép kích hoạt tất cả các trình xử lý sự kiện, được gắn vào phần tử cho các loại sự kiện đã chỉ định
Phương thức JavaScript bind,
cho phép ràng buộc ngữ cảnh vào hàm