Sử dụng .bind() trong jQuery

Các bind (). phương pháp là phương tiện chủ yếu của hành vi đính kèm cho một document. Tất cả các loại JavaScript sự kiện, chẳng hạn như focus, mouseover, và resize, được cho phép eventType. (Các sự kiện beforeunload và error trên đối tượng sử dụng các công ước không tiêu chuẩn và không được hỗ trợ bởi jQuery; kèm theo một bộ xử lý trực tiếp vào đối tượng thay thế.)

Các thư viện jQuery cung cấp method phím tắt để liên kết các kiểu sự kiện đạt tiêu chuẩn, chẳng hạn như click() cho .bind('click'). Một mô tả có thể được tìm thấy trong mỗi các cuộc thảo luận về method shortcut của: Blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mouseDown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change , select, submit, keydown, keypress, keyup, error.

Chuỗi Bất kỳ là pháp lý cho eventType, nếu chuỗi không phải là tên của một sự kiện JavaScript gốc, rồi xử lý được gắn với một sự kiện tùy chỉnh. Những sự kiện này không bao giờ được gọi bởi trình duyệt, nhưng có thể được kích hoạt bằng tay từ mã JavaScript khác sử dụng .trigger() hoặc .triggerHandler().

sử dụng cơ bản của bind() là:

$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});

Nhiều sự kiện
Nhiều loại sự kiện có thể bị ràng buộc cùng một lúc bằng cách bao gồm mỗi one cách ra bằng khoảng một:

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

Theo jQuery 1.4 chúng ta có thể bind đồng thời nhiều sự kiện xử lý bằng cách truyền một Map của các loại type/handler:

$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});

Quản lý sự kiện

Các thông số xử lý có một chức năng gọi lại, như ở trên. Trong thời hạn xử lý, các từ khoá này đề cập đến các phần tử DOM trong đó xử lý được ràng buộc. Để sử dụng các phần tử trong jQuery, nó có thể được truyền cho các $() thông thường.

$('#foo').bind('click', function() {
alert($(this).text());
});

Các đối tượng Sự kiện

Chức năng gọi lại xử lý cũng có thể mang các thông số. Khi hàm được gọi, các đối tượng JavaScript sự kiện sẽ được truyền cho tham số đầu tiên.

$(document).ready(function() {
$('#foo').bind('click', function(event) {
alert('The mouse cursor is at ('
+ event.pageX + ', ' + event.pageY + ')');
});
});

Đi qua dữ liệu Sự kiện

Các tham số tùy chọn eventData không thường được sử dụng. Khi được cung cấp, lập luận này cho phép chúng tôi chuyển thông tin bổ sung đến các xử lý. Thuận tiện sử dụng của tham số này là làm việc xung quanh vấn đề gây ra . Ví dụ, giả sử chúng ta có hai xử lý sự kiện là cả hai tham khảo các biến bên ngoài giống nhau:

var message = 'Spoon!';
$('#foo').bind('click', function() {
alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
alert(message);
});

Ví dụ : Xử lý nhấp chuột và nhấn đúp cho đoạn văn này. Lưu ý: các tọa độ window tương đối, vì vậy trong trường hợp này liên quan đến các khung nội tuyến demo.

Click or double click here.

$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

sử dụng .unbind() để hủy phương thức onclick()

những gì trên đây chỉ mang tính chất gợi ý, vì mình k thích ghi dài dòng, thực tế trên mạng có hết. mình chỉ gợi ý để search trên mạng, chứ không phải ghi đầy đủ hết mọi thứ.