[JQuery] Phần 4: Các sự kiện trong jQuery

96 lượt xem

Trong bài này, chúng ta sẽ tìm hiểu về các sự kiện được sử dụng trong jQuery.

Sự kiện (Event)
Sự kiện là các tương tác của người dùng với trang web. Sau đây là các ví dụ về sự kiện:

  • di chuyển con chuột trên 1 phần tử
  • chọn 1 nút radio
  • nhấn chuột lên 1 phần tử

Một số sự kiện phổ biến DOM

Sự kiện chuột Sự kiện bàn phím Sự kiện form Sự kiện văn bản/cửa sổ
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

Cú pháp jQuery cho các phương thức sự kiện
Trong jQuery, đa số các sự kiện DOM đều có phương thức jQuery tương ứng. Để gán 1 sự kiện nhấn chuột (click) cho tất cả đoạn trong 1 trang, chúng ta có thể dùng:

$("p").click();

Bước tiếp theo là định nghĩa hàm thực thi khi xảy ra sự kiện nhấn chuột.

$("p").click(function(){
  // viết đoạn mã thực thi khi xảy ra sự kiện nhấn chuột ở đây
});

Các phương thức sự kiện jQuery thường dùng
$(document).ready()
Phương thức $(document).ready() cho phép thực thi 1 hàm khi tài liệu (document) hoàn thành việc tải về client. Sự kiện này sẽ được giải thích chi tiết cho các bài sau.

click()
Phương thức click() gắn 1 hàm xử lý sự kiện vào 1 phần tử HTML. Hàm được thực thi khi người dùng nhấn chuột lên phần tử HTML

Sau đây là ví dụ, khi nhấn vào phần tử p, phần tử đó sẽ bị ẩn đi.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>Nhấn vào đây, dòng chữ này sẽ biến mất -- dammio.com</p>
<p>Nhấn vào để biến nè!</p>
<p>Nhấn biến luôn!</p>

</body>
</html>

dblclick()
Phương thức dblclick() tương tự như click() nhưng lúc này chúng ta sẽ nhấn đôi chuột để phát sinh ra sự kiện. Ví dụ sau tương tự ở phần click() chỉ khác là thay hàm xử lý dblclick().

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).hide();
    });
});
</script>

mouseenter()
Phương thức mouseenter() thực thi khi người dùng rê chuột lên phần tử HTML. Trong ví dụ sau, nếu người dùng rê chuột lên phần tử có id=”p1″ thì 1 hộp thoại sẽ xuất hiện.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").mouseenter(function(){
        alert("Bạn đã rê chuột lên dòng chữ dammio.com");
    });
});
</script>
</head>
<body>

<p id="p1">Rê chuột lên đây --- dammio.com</p>

</body>
</html>

mouseleave()
Phương thức này thực thi khi chuột rời khỏi phần tử HTML nào đó.

mousedown()
Phương thức mousedown() được thực thi khi các phím trái, giữa, và phải chuột được nhấn khi chuột đang rê trên phần tử HTML.

mouseup()
Ngược với phương thức mousedown(), phương thức này được thực thi khi các phím trái, giữa, và phải chuột được nhả ra khi chuột đang rê trên phần tử HTML.

hover()
Phương thức hover() là sự kết hợp của 2 phương thức mouseenter()mouseleave(). Hàm đầu tiên thực thi khi chuột được rê trên phần tử HTML, và hàm thứ 2 được thực thi khi chuột rời khỏi phần tử HTML đó.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").hover(function(){
        alert("Bạn đã rê chuột lên p1! --- dammio.com");
    },
    function(){
        alert("Bạn vừa rời p1!");
    }); 
});
</script>
</head>
<body>

<p id="p1">Rê chuột lên dòng chữ này --- dammio.com</p>

</body>
</html>

focus()/blur()
Phương thức focus() được thực thi khi trường dữ liệu trên form được chọn. Ngược lại blur() áp dụng khi người dùng rời chọn trường dữ liệu đó. Trong ví dụ sau, khi chọn (focus) trường nhập liệu thì trường đó có màu nền #cccccc, khi bỏ chọn (blur) thì trường nhập liệu có màu nền là màu trắng.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>
</head>
<body>
<h2>Đăng ký thành viên tại dammio.com </h2>
Tên: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

Phương thức on()
Phương thức này sẽ cho phép thêm 1 hay nhiều hàm xử lý sự kiện với các phần tử được chọn. Ví dụ sau trình bày cách thêm các phương thức mouseenter, mouseleave và click với phần tử p.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "lightgray");
        },  
        mouseleave: function(){
            $(this).css("background-color", "lightblue");
        }, 
        click: function(){
            $(this).css("background-color", "yellow");
        }  
    });
});
</script>
</head>
<body>

<p>Rê chuột, nhấn chuột, rê chuột ra ngoài để thấy các hiệu ứng đổi màu. --- dammio.com</p>

</body>
</html>

Kết luận: Thông qua bài này, bạn đã nắm 1 sự kiện cơ bản trong jQuery và cách áp dụng chúng trong việc xây dựng các ứng dụng đơn giản.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz