Người Viết : ViKiMi Editor

Cách sử dụng hiệu quả những Phương Thức Sự Kiện (jQuery Event Methods) với Developer
Khi làm việc với jQuery chúng ta cảm thấy có phần hơi giống hoặc tương đồng với CSS vì vậy nhiều lúc chúng ta nghĩ rằng chắc nó sẽ khá giống với cách mà CSS làm việc. Nhưng sự thật có phải như vậy không? Những thắc mắc như vậy luôn đem lại kết quả nhiều hơn, và chúng ta cần giải quyết những vấn đề có vẻ tương đồng đó.
+ Câu trả lời của chúng ta rõ ràng là không hề giống nhau.
Vì jQuery chỉ sử dụng cú pháp CSS để chọn các phần tử HTML.
Nhưng cách làm việc của jQuery thì hoàn toàn khác so với CSS. Với jQuery chúng ta có thể làm được rất nhiều thứ cần thiết, và cũng linh hoạt hơn nhiều so với việc sử dụng CSS.
+ Để làm rõ điều này chúng ta sẽ xem xét các Phương Thức Sự Kiện của jQuery / jQuery Event Methods.
(Quả thực nó có vẻ rất tương đồng với CSS, nhưng cách làm việc thì hoàn toàn khác. JQuery đem lại nhiều lợi ích cho chúng ta.)
DANH SÁCH CÁC PHƯƠNG THỨC SỰ KIỆN :
Các Sự kiện là tất cả các hành động của khách truy cập mà một trang Web có thể phản hồi. Do đó, với mỗi sự kiện chúng ta luôn cần tạo một hàm để xử lý sự kiện đó nhằm tạo phản hồi tối ưu tới khách truy cập.
EXAMPLE ::
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $(function () { // declare function jQuery.myfunction = function () { $("input").focus(function(){ $(this).css("background-color", "yellow"); }); $("input").blur(function(){ $(this).css("background-color", "white"); }); }; }); $(document).ready(function(){ /** Call Function **/ jQuery.myfunction(); }); </script> </head> <body> <h1>Welcome to My Web Page</h1> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
A >> The click Method
Tác dụng của phương thức Click là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập kích chuột vào phần tử HTML
Example : Ẩn phần tử span khi nó được click
$(“span”).click(function(){
$(this).hide();
});
B >> The dblclick method
Tác dụng của phương thức dblclick là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập kích đúp chuột vào phần tử HTML
Example : Ẩn phần tử span khi nó được double clicks
$(“span”).dblclick(function(){
$(this).hide();
});
C >> The mouseenter method
Tác dụng của phương thức mouseenter là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập trỏ chuột vào phần tử HTML
Example : Đưa ra cảnh báo khi trỏ chuột vào phần tử div
$(“div”).mouseenter(function(){
alert(“Bạn đã trỏ chuột vào phẩn tử DIV!”);
});
+ C 1 >> The mouseleave method
Tác dụng của phương thức mouseleave là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập rời chuột khỏi phần tử HTML
Example : Đưa ra cảnh báo khi rời chuột khỏi phần tử div
$(“div”).mouseleave(function(){
alert(“Bạn đã rồi chuột khỏi phẩn tử DIV!”);
});
D >> The mousedown method
Tác dụng của phương thức mousedown là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập nhấn nút chuột trái, chuột phải hoặc chuột giữa vào phần tử HTML
Example : Đưa ra cảnh báo khi nhấn chuột vào phần tử div
$(“div”).mousedown(function(){
alert(“Bạn đã nhấn chuột vào phẩn tử DIV!”);
});
+ D 1 >> The mouseup method
Tác dụng của phương thức mouseup là gán một hàm xử lý tới một phần tử HMTL.
Hàm này sẽ được thực thi khi khách truy cập thực hiện thả nút chuột trái, chuột phải hoặc chuột giữa trên phần tử HTML
Example : Đưa ra cảnh báo khi thả chuột trên phần tử div
$(“div”).mouseup(function(){
alert(“Bạn đã thả chuột trên phẩn tử DIV!”);
});
E >> The hover method
Phương thức hover có 2 hàm là sự kết hợp của 2 phương thức mouseenter và mouseleave.
Do đó, khi sử dụng hover thì có nghĩa là bạn đã sử dụng cả 2 phương thức mouseenter + mouseleave. Điều này giúp phản hồi hiệu quả tốt hơn tới khách truy cập.
Hàm đầu tiên thực thi khi chuột trỏ vào phần tử HTML, hàm thứ 2 thực thi khi chuột rời khỏi phần tử HTML.
Example : Đưa ra cảnh báo khi HOVER trên phần tử div
$(“#div1”).hover(
function(){
alert(“Bạn trỏ chuột vào phần tử Div có id là div1!”);
},
function(){
alert(“Bạn rời chuột khỏi phần tử Div có id là div1!”);
}
);
F >> The focus method
Tác dụng của phương thức focus là gán một hàm xử lý tới một trường HTML form.
Hàm này sẽ được thực thi khi trường đó được focus
Example : Thay đổi màu nền cho trường input của HTML form
$(“input”).focus(function(){
$(this).css(“background-color”, “lightgray”);
});
+ F 1 >> The blur method
Tác dụng của phương thức blur là gán một hàm xử lý tới một trường HTML form.
Hàm này sẽ được thực thi khi trường đó không còn được focus / ( loses focus )
Example : Thay đổi màu nền là trắng cho trường input của HTML form
$(“input”).blur(function(){
$(this).css(“background-color”, “white”);
});
G >> The On Method
Cuối cùng là phương thức On, một phương thức cho phép thực thi nhiều xử lý sự kiện trên phần tử được chọn.
Phương thức này tỏ rất hiệu quả nếu bạn muốn viết các xử lý thật ngắn gọn nhất trên phần tử được chọn.
Example : Thực thi nhiều xử lý sự kiện trên phần tử DIV có id là div1, sử dụng phương thức On
$(“#div1”).on({
mouseenter: function(){
$(this).css(“background-color”, “aqua”);
},
mouseleave: function(){
$(this).css(“background-color”, “white”);
},
click: function(){
$(this).css(“background-color”, “yellow”);
}
});