Trong thiết kế web, khi sử dụng jquery để áp đặt lên một đối tượng nào đó, chúng ta thường phải lựa chọn các sự kiện xảy ra với đối tượng đó để áp đặt.
Ví dụ như một số sự kiện:
Khi sử dụng các sự kiện trong jquery chúng ta cần phải tuân thủ theo cú pháp.
<script>
$(selectors).events(function(){
// mã lệnh
});
</script>
Trong đó:
<script>
$("p").click(function(){
$(this).hide();
});
// Ví dụ:
$("p").dblclick(function(){
$(this).hide();
});
// Ví dụ:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
// Ví dụ:
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
// Ví dụ:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
// Ví dụ:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
// Ví dụ:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
// Ví dụ:
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
// Ví dụ:
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
// Ví dụ:
$("p").on("click", function(){
$(this).hide();
});
// Ví dụ:
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>
| Sự kiện | Ý nghĩa |
|---|---|
| blur() | Sự kiện này xảy ra trên các phần tử biểu mẫu như input, textarea, select,... khi chúng vừa bị mất trạng thái được truy cập. |
| change() | Sự kiện này xảy ra trên các phần tử biểu mẫu như input, textarea, select,... khi giá trị của chúng bị thay đổi. |
| click() | Sự kiện này xảy ra khi phần tử bị click chuột trái vào. |
| dblclick() | Sự kiện này xảy ra khi phần tử bị click kép chuột trái vào. |
| focus() | Sự kiện này xảy ra trên các phần tử biểu mẫu như input, textarea, select,... khi chúng có trạng thái được truy cập. |
| focusin() | Sự kiện này xảy ra khi phần tử (hoặc bất kỳ một phần tử con cháu nào của nó) đang ở trạng thái được truy cập. |
| focusout() | Sự kiện này xảy ra khi phần tử (hoặc bất kỳ một phần tử con cháu nào của nó) vừa bị mất trạng thái được truy cập. |
| hover() | Sự kiện này xảy ra khi người dùng dí con trỏ vào phần tử. |
| keydown() | Sự kiện này thường xảy ra trên textfield khi một phím được nhấn xuống. |
| keypress() | Sự kiện này thường xảy ra trên textfield khi một phím được nhấn xuống. |
| keyup() | Sự kiện này thường xảy ra trên textfield khi phím được nhả ra. |
| mousedown() | Sự kiện này xảy ra khi người dùng nhấn chuột vào phần tử. |
| mouseenter() | Sự kiện này xảy ra khi người dùng di chuyển con trỏ vào phần tử. |
| mouseleave() | Sự kiện này xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử. |
| mousemove() | Sự kiện này xảy ra khi người dùng chuyển động con trỏ bên trong phần tử. |
| mouseout() | Sự kiện này xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử (hoặc bất kỳ con cháu nào nằm bên trong phần tử) |
| mouseover() | Sự kiện này xảy ra khi người dùng di chuyển con trỏ vào phần tử (hoặc bất kỳ con cháu nào nằm bên trong phần tử) |
| mouseup() | Sự kiện này xảy ra khi người dùng nhả chuột ra khỏi phần tử. |
| ready() | Sự kiện này ra khi DOM (Document Object Model) được tải hoàn chỉnh. |
| resize() | Sự kiện này xảy ra khi kích thước của khung trang web bị thay đổi. |
| scroll() | Sự kiện này xảy ra khi người dùng kéo thanh cuộn của phần tử. |
| select() | Sự kiện này xảy ra trên textfield khi văn bản bên trong nó bị người dùng bôi đen. |
| submit() | Sự kiện này xảy ra khi người dùng submit (gửi đi) dữ liệu. |
Trích dẫn: (http://khonggiankythuat.com)
