jQuery - Event

Như ta đã biết các thẻ trong HTML thường hỗ trợ các sự kiện như: onclick, onkeydown, onmousedown... thường dưới dạng attribute và chúng ta phải định nghĩa hàm cho nó theo dạng sau:

     <div onclick="click()"/>

Vậy câu hỏi đặt ra là: jQuery có hỗ trợ cho chúng ta gọi những sự kiện này hay không?

Câu trả lời là có. jQuery hỗ trợ cho chúng ta hầu như là đầy đủ những sự kiện. Một số sự kiện thường dùng được jQuery hỗ trợ như là:

Mouse event(sự kiện chuột)

1. click: sự kiện này được gọi khi có một click chuột có nghĩa là bao gồm nhấn trái chuột xuống và nhả ra(mouse down and mouse up).
2. mousedown: sự kiện này được gọi khi vừa nhấn trái chuột
3. mouseup: sự kiện này được gọi khi nhả chuột trái
4. mouseenter: sự kiện này được gọi khi con trỏ chuột di chuyển vào vùng quy định.
5. mouseleave: sự kiện này được gọi khi con trỏ chuột rời khỏi vùng quy định.
6. mousemove: sự kiện này được gọi khi con trỏ chuột di chuyển bên trong vùng quy định.

Keyboard event(sự kiện bàn phím)

1. keypress: sự kiện này được gọi khi một phím trên bàn phím được nhấn và nhả ra.
2. keydown: sự kiện này được gọi khi một phím trên bàn phím được nhấn xuống(chưa nhả).
3. keyup: sự kiện này được gọi khi một phím trên bàn phím được nhả ra.

Other event(sự kiện khác)

1. focus: sự kiện xảy ra khi ta đang focus vào 1 element(con nháy trong textbox, viền trên button, radio, checkbox...).
2. blur: ngược lại focus
3. change: sự kiện này được gọi khi giá trị của một radio hoặc một checkbox được thay đổi(check - uncheck).
4. live và bind: dùng để gán hàm xử lý của một element.
5. scroll: bắt sự kiện của thanh scrollbar

Cú pháp chung

$("#element_id").event_name(function(ObjectEventHandle){ code here });
$("[name='element_name']").event_name(function(ObjectEventHandle){ code here });

Có thể có hoặc không có ObjectEventHandle

Tình huống

     Khi ta click vào button thì sẽ hiển thị thêm chữ ở ô màu xám bên cạnh.

Code

<style>
#show{
  float:left;
  background-color:#EAEAEA;
  border:1px solid black;
  color:red;
  width:200px;
  height:200px;
  margin-left:200px;
  overflow:auto;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $("#butShow").click(function(){
    $("#show").html($("#show").html()+" Click");
  });
});
</script>
<div><div style="float:left;"><input type="button" value="Click me" id="butShow"/></div><div id="show"></div></div>

Demo