Jquery Events

Như các bạn đã được biết trong javascript cung cấp cho chúng ta khá nhiều sự kiện liên quan tới con chuột,bàn phím,trình duyệt… Jquery tất nhiên cung cấp đầy đủ những sự kiện trong javascript. Không chỉ vậy, với cú pháp xử lý đơn giản, dễ hiểu nó còn làm được nhiều hơn thế.

– jQuery cung cấp cho chúng ta khá nhiều các sự kiện đủ để thao tác với các thành phần trên website mà chúng ta mong muốn. Bên cạnh đó, jQuery còn loại bỏ hoàn toàn các event code ra khỏi mã HTML như cách viết javascript thông thường

Cú pháp chung:

<script type="text/javascript" >
$(document).ready(function(){
    $("phần tử thao tác").ten_su_kien(function(){
            //code jquery
    }) ;
})
</script>

Trong đó thì ten_su_kien chính là tên các sự kiện trong jQuery

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

1. click: sự kiện này được gọi khi có một click chuột (bao gồm cả 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.

– Ví dụ:

<script type="text/javascript" >
$(document).ready(function(){
    $("button.click").click(function(){
         alert('Bài học các sự kiện trong jQuery tại hocphp.info');
    }) ;
})
</script>

Click vào đây để xem demo : Click here
Trong ví dụ trên chúng ta đang gọi tới sự kiện click chuột vào thẻ <button class=”click”> thì hiển thị ra câu thông báo

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 (bao gồm cả keydown và keyup).
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.

– Ví dụ:

<script type="text/javascript" >
$(document).ready(function(){
    $("input[type='text']").keydown(function(){
         alert('Bạn vừa gõ 1 kỹ tự trên bàn phím');
    }) ;
})
</script>

Gõ 1 ký tự bất kỳ vào đây để xem demo :
Trong ví dụ trên chúng ta đang gọi tới sự kiện gõ 1 ký tự trên bàn phím vào thẻ <input type=”text” /> thì hiển thị ra thông báo

Các sự kiện đối với trình duyệt

1. error(): Xảy ra khi trình duyệt gặp lỗi trong quá trình tải tài liệu.
2. resize(): khi người dùng thay đổi kích thước cửa sổ trình duyệt .
3. scroll(): Xử lý tác tác vụ khi người dùng cuộn trang

Các sự kiện với Form

1. focus(): khi con trỏ chuột đang tác động tại phần tử Form.
2. blur(): Thực hiện khi click chuột ra ngoài phần tử form.
3. change(): khi giá trị của phần tử được thay đổi
4. select(): khi phần tử form được chọn
5. submit(): Khi form được submit

– Ví dụ:

<script type="text/javascript" >
$(document).ready(function(){
    $("input#change").change(function(){
         alert('Bạn vừa thay đổi giá trị trong thẻ select');
    }) ;
})
</script>

Nhập nội dung bất kỳ vào đây để xem demo :

Trong ví dụ trên chúng ta đang gọi tới sự kiện thay đổi nội dung trong thẻ <input id=”change” /> thì hiển thị ra thông báo

Kết thúc bài viết: Qua bài này chúng ta đã biết những sự kiện quan trọng trong jQuery,tuy nhiên còn rất nhiều sự kiện khác các bạn có thể tham khảo tại đây để có thêm kiến thức về jQuery Events nhé