Sự Kiện Trong Jquery - Thầy Long Web

Trang chủ » Các Sự Kiện Trong Jquery » Sự Kiện Trong Jquery - Thầy Long Web

Có thể bạn quan tâm

jQuery hỗ trợ bạn viết code gắn với các sự kiện của các tag trong trang HTML. Ví dụ sự kiện click, mousemove, submit…

Đây là các event chuẩn của DOM:

Mouse Events Keyboard Events Form Events Document/Window Events
Click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

Các sự kiện DOM như trên đều có thể viết code đón và xử lý trong jQuery. Ví dụ: viết code jquery để xử lý khi click vào các tag p như sau:

$("p").click( );

Khi có 1 sự kiện xảy ra, bạn muốn làm gì đó thì phải viết trong 1 function. Ví dụ, khi user click vào 1 tag p nào đó, bạn muốn thi hành lệnh thì các lệnh sẽ viết trong 1 function như sau:

$("p").click( function(){ alert('Bạn vừa nhắp vào 1 paragrapth'); });

Viết gọn lại:

$("p").click(function(){ alert('Bạn vừa nhắp vào 1 paragrapth'); });

$(document).ready()

$(document).ready() là nơi bạn viết các lệnh thực thi khi trang web vừa nạp xong đầy đủ mọi thành phần trong nó (hình ảnh, file css, file js…)

click()

click() là nơi bạn gọi hàm để chạy khi 1 tag được nhắp vào. Ví dụ:

$("p").click(function(){ $(this).hide(); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_click

dblclick()

dblclick() là nơi bạn gọi hàm để chạy khi 1 tag được nhắp đúp.

$("p").dblclick(function(){ $(this).hide(); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dblclick

mouseenter()

mouseenter() là nơi bạn gọi hàm để chạy khi 1 tag trỏ chuột vào

$("#p1").mouseenter(function(){ alert("Bạn đang ở trong vùng giỏ hàng!"); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mouseenter

mouseleave()

mouseleave() là nơi bạn gọi hàm để chạy khi 1 tag bị đưa chuột ra khỏi

$("#p1").mouseleave(function(){ alert("Bye! Bạn đừng thoát ra nhé!"); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mouseleave

mousedown()

mousedown() là nơi bạn gọi hàm để chạy khi user đè chuột trên 1 tag

$("#p1").mousedown(function(){ alert("Đèn chuột trên cột phải!"); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mousedown

mouseup()

mouseup() là nơi bạn gọi hàm để chạy khi user buông nút chuột trên 1 tag .

$("#p1").mouseup(function(){ alert("Mouse up trên cột phải"); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mouseup

hover()

hover() = là tổ hợp của mouseenter() và mouseleave() .

$("#p1").hover(function(){ alert("You entered p1!"); },

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hover

focus(), blur()

focus() là nơi bạn gọi hàm để chạy khi 1 control trong form có focus

blur() là nơi bạn gọi hàm để chạy khi 1 control trong form mất focus

$("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#ffffff"); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_focus_blur

Hàm trigger() và hàm on() trong Jquery

Có hai hàm đặc biệt trong Jquery là trigger() để kích hoạt các sự kiện và hàm on() dùng để gắn sự kiện cho các tag trong trang.

Hàm trigger() trong Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").select(function(){ $(this).css("color", "red"); }); $("button").click(function(){ $("input").trigger("select"); }); }); </script> </head> <body> <input type="text" value="Chúc an lành"><br><br> <button>Trigger select event input field</button> </body>

Hàm on trong Jquery

  • Hàm on() trong jquery là một hàm dùng để gắn sự kiện cho tag được chọn hoặc tag con của nó.
  • Từ jQuery version 1.7, hàm on() đã thay thế cho các hàm bind(), live() và delegate().
  • Hàm on có thể dùng để gắn sự kiện cho tag hiện hành hoặc những tag sẽ tạo trong sau này, tức hiện tại chưa có (các tag con sẽ được tạo sau này).
  • Để gỡ sự kiện đã gắn, bạn dùng hàm off()
  • Để gắn 1 sự kiện chỉ chạy 1 lần rồi thôi thì dùng hàm one()

Cú pháp của hàm on:

$(selector).on(sựkiện , tagCon , data, function, map )
ParameterDescription
sựkiệnRequired. Chỉ định 1 hoặc nhiều sự kiện hoặc namespace mà bạn muốn gắn vào tag được chọn. Các sự kiện cách nhau bởi khoảng trắng
tagConOptional. Để khai báo rằng sựkiện chỉ gắn tới tag con của selector hiện tại cứ không phải chính selector, giống như hàm delegate() đã bị bỏ
dataOptional. Khai báo dữ liệu sẽ chuyển đến cho hàm thực thi khi sự kiện diễn ra.
functionRequired. Hàm thực thi khi sự kiện diễn ra.
mapChỉ định các event map ({event:function, event:function, …}) chứa 1 hoặc nhiều sự kiện để gắn vào selector, và các hàm để chạy khi sự kiện xảy ra

Ví dụ cơ bản về hàm on

on() là nơi bạn gắn các sự kiện để chạy hàm cho các tag trong trang.

$("p").on("click", function(){ $(this).hide(); });

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_on_click

Gắn nhiều sự kiện cùng lúc

Dùng hàm on để gắn nhiều sự kiện (cùng thực thi 1 hàm) cho tag được chọn

<html><head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"> <script> $(document).ready(function(){ $("p").on("mouseover mouseout", function(){ $(this).toggleClass("intro"); } ); }); </script> <style> .intro { font-size: 150%; color: red;} </style> </head> <body class="p-3"> <p>Bài thơ về Mẹ</p> </body></html>

Gắn các sự kiện cho tag với map parameter

Bạn có thể gắn các sự kiện cho tag, mỗi sự kiện chạy 1 hàm khác nhau

<html><head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"> <script> $(document).ready(function(){ $("#baitho").on({ mouseover: function(){ $(this).css("background-color", "lightgray"); }, mouseout: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); }); </script> </head><body> <p id="baitho" class="col-5 mx-auto mt-5 border border-info p-4 text-center"> Mẹ ơi con chịu bao điều<br> Nhưng không chịu nổi thân diều đứt dây </p> </body></html>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_on_multiple

Gắn sự kiện tự định nghĩa cho tag

Ngoài các sự kiện chuẩn như click, dbclick, mouseover… bạn có thể dùng on để gắn sự kiện mới của bạn cho các tag

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#chuc").on("chao", function(event, ten){ $(this).text("Chào " + ten+ "! Chúc an lành"); }); $("button").click(function(){ $("#chuc").trigger("chao", ["Tèo"]); }); }); </script> <button> Chào </button> <p id="chuc"></p>

Chuyển dữ liệu tới hàm thực thi

Cách dùng hàm on để chuyển giá trị tới hàm thực thi như sau:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" > <script> function hamchay1(event) { $("#ketqua").html(event.data.msg).addClass("bg-info mx-auto text-center p-2 text-danger h3 text-uppercase"); } function hamchay2(event) { $("#ketqua").html(event.data.msg).addClass("bg-warning mx-auto text-center p-2 text-secondary h4 text-italic"); } $(document).ready(function(){ $("#dung").on("click", {msg: "Bé giỏi quá"}, hamchay1); $("#sai").on("click", {msg: "Sai rồi bé ơi"}, hamchay2); }); </script> <button id="dung">Đúng </button> <button id="sai">Sai</button> <p id="ketqua"></p>

Thêm sự kiện cho các tag chưa có (sẽ có sau)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").on("click", "p", function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> <div style="background-color:yellow"> <p>This is a paragraph.</p> <p>Click any p element to make it disappear. Including this one.</p> <button>Insert a new p element after this button</button> </div>

Ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#k1").hide().show(2000, function(){ $("#k1").css("font-size","150%");} ); //aa }); }); </script> <div class="col-6 mx-auto mt-4 text-center"> <h4>LỤC VÂN TIÊN</h4> <button id="btn1" class="h5">></button> <p class="khotho bg-info p-2" id="k1"> Trước đèn xem truyện Tây-minh<br>Gẫm cười hai chữ nhân tình éo le,<br> Hỡi ai lẳng lặng mà nghe,<br>Dữ răn việc trước, lành dè thân sau . </p></div>

Event exercise

https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_events1https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_events2https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_events3https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_events4https://www.w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_events5

Các event và thuộc tính của event trong jquery

Method / Property Description
bind() Đã bỏ trong version 3.0. Dùng on() thay thế. Attaches event handlers to elements
blur() Attaches/Triggers the blur event
change() Attaches/Triggers the change event
click() Attaches/Triggers the click event
dblclick() Attaches/Triggers the double click event
event.currentTarget Tag hiện hành mà sự kiện xảy ra, tương đương this trong javascript
event.data Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented() Returns whether event.preventDefault() was called for the event object
event.pageX Tọa độ của chuột tính từ cạnh trái của document
event.pageY Tọa độ của chuột tính từ cạnh trên của document
event.preventDefault() Khóa action mặc định của element . Ví dụ cấm tag a chuyển tới href khi user click chuột
event.relatedTarget Returns which element being entered or exited on mouse movement
event.result Contains the last/previous value returned by an event handler triggered by the specified event
event.stopPropagation() Dừng lan truyền sự lên tag cha
event.target Đối tượng DOM mà sự kiện xảy ra. Có thể thay bằng this. Thường dùng khi bạn chọn nhiều đối tượng 1 lúc. Ví dụ $(“p, a”).click(function(event){ })
event.timeStamp Returns the number of milliseconds since January 1, 1970, when the event is triggered
event.type Returns which event type was triggered
event.which Cho biết mã của phím được gõ (ví dụ A là 65, space là 32 ) hoặc nút chuột được nhắp (1 là nút trái, 3 al2 nút phải)
focus() Attaches/Triggers the focus event
focusin() Attaches an event handler to the focusin event
focusout() Attaches an event handler to the focusout event
hover() Attaches two event handlers to the hover event
keydown() Attaches/Triggers the keydown event
keypress() Attaches/Triggers the keypress event
keyup() Attaches/Triggers the keyup event
mousedown() Attaches/Triggers the mousedown event
mouseenter() Attaches/Triggers the mouseenter event
mouseleave() Attaches/Triggers the mouseleave event
mousemove() Attaches/Triggers the mousemove event
mouseout() Attaches/Triggers the mouseout event
mouseover() Attaches/Triggers the mouseover event
mouseup() Attaches/Triggers the mouseup event
on() Attaches event handlers to elements
one() Adds one or more event handlers to selected elements. This handler can only be triggered once per element
$.proxy() Takes an existing function and returns a new one with a particular context
ready() Specifies a function to execute when the DOM is fully loaded
resize() Attaches/Triggers the resize event
scroll() Attaches/Triggers the scroll event
select() Attaches/Triggers the select event
submit() Attaches/Triggers the submit event
trigger() Triggers all events bound to the selected elements

Hàm each()

Là hàm lặp qua các phần tử được chọn và gọi 1 hàm để thực hiện hành động trên từng phần tử. Trong hàm được gọi, bạn dùng $(this) hoặc this để xử lý phần tử hiện hành.

$(selector).each(function(index,element)); Trong đó : index là chỉ số của từng phần tử được trích ra, element là tên biến để truy xuất phần tữ hiện hành, có thể dùng this thay thế <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("a").each(function(){ var t= $(this).text(); t=t.toUpperCase(); $(this).text(t); }); }); }); </script> <button>Hiện ra href </button><hr> <a href="htttps://google.com">Google</a><br> <a href="htttps://longnv.name.vn">Thầy Long</a><br> <a href="htttps://w3schools.com">Tài liệu</a>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_misc_each

Từ khóa » Các Sự Kiện Trong Jquery