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)
- 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).
- mousedown: sự kiện này được gọi khi vừa nhấn trái chuột
- mouseup: sự kiện này được gọi khi nhả chuột trái
- mouseenter: sự kiện này được gọi khi con trỏ chuột di chuyển vào vùng quy định.
- mouseleave: sự kiện này được gọi khi con trỏ chuột rời khỏi vùng quy định.
- 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 :
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)
- 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).
- 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ả).
- 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
- error(): Xảy ra khi trình duyệt gặp lỗi trong quá trình tải tài liệu.
- resize(): khi người dùng thay đổi kích thước cửa sổ trình duyệt .
- scroll(): Xử lý tác tác vụ khi người dùng cuộn trang
Các sự kiện với Form
- focus(): khi con trỏ chuột đang tác động tại phần tử Form.
- blur(): Thực hiện khi click chuột ra ngoài phần tử form.
- change(): khi giá trị của phần tử được thay đổi
- select(): khi phần tử form được chọn
- 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é
Written by Nguyễn Tuấn Vũ
Hocphp.info là website chia sẻ kiến thức lập trình đặt biệt tập trong vào lập trình web. Hi vọng mọi người cùng nhau phát triển và chia sẽ nhiều hơn nữa, ngoài ra mình cũng cố gắng chia sẽ các seri về web cũng như các ngôn ngữ khác chất nhất có thể. có gì thiếu sót hi vọng mọi người bỏ qua.
Bài viết chùng chuyên mục
Categories
- Codeigniter (25)
- Expressjs (2)
- Html & Css (5)
- Javascript & Jquery (13)
- Lập trình ios (12)
- Laravel Framework (15)
- MongoDB (5)
- Nodejs (3)
- Php cơ bản (17)
- Php nâng cao (13)
- SEO và MMO (1)
- Symfony (4)
- Tin công nghệ (2)
- Tổng hợp (13)
Recent Comments
29Mar
2 / By Quả Caching website trong codeigniter framework
Bài viết rất hay, mình hỏi với: Mình dùng framework - codeIgnite nh
07Mar
8 / By phimav Các cách chèn video youtube vào bài viết
ai get link thằng ondrive được không?
28Feb
3 / By Đọc ghi dữ liệu JSON trong php - wikisinhvien Mảng trong PHP
[…] truy cập vào phần tử trong dữ liệu JSON các bạn cũng c
22Jan
3 / By Giới thiệu PHP Framework CodeIgniter - wikisinhvien Mảng trong PHP
[…] Làm việc và xử lý mảng thật […]
07Dec
10 / By admin Mô Hình MVC
Bạn cố gắng tham khảo thêm ở những tài liệu khác, có thời gi