Trong bài này mình sẽ giới thiệu các sự kiện trong Javascript. Sự kiện hay còn lại là sự kiện, là một tác động nào đó đưa lên các đối tượng HTML thông qua cấu trúc DOM Show
 Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức. Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM, nhưng nhận thấy việc học mà không thực hành thì rất buồn chán và khó nhớ bài. Vì vậy, trong bài viết này mình sẽ giới thiệu về các sự kiện js. Sau bài này chúng ta có thể làm được nhiều ví dụ hơn và mình cũng sẽ không mất quá nhiều thời gian giải thích nữa Trước tiên chúng ta hãy tìm hiểu xem sự kiện trong JS là gì đã nhé 1. Sự kiện trong javascript là gì?Sự kiện là một hành động tác động lên các đối tượng HTML, qua đó ta có thể nắm bắt được sự kiện và yêu cầu javascript thực thi một chương trình nào đó Bài viết này đã được đăng tại [free tuts. net] Mỗi sự kiện chúng ta có thể chỉ định nhiều hành động. Ví dụ bạn có một sự kiện là tết âm lịch, thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, thu dọn nhà cửa, mua bao lì xì, Người đánh giá về mặt thực tế thì ta có ví dụ thế này. Giả sử bạn xây dựng một biểu mẫu đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào nút đăng ký thì hiện các hành động như sau
Như vậy, bạn cần nhớ rằng mỗi sự kiện trong JS thì ta có thể gán nhiều hành động khác nhau, và gán bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ thể Ví dụ. Giả sử mình có một thẻ đầu vào có id là 'clickme', bây giờ mình viết sự kiện khi nhấp vào ô nhập liệu thì xuất ra một thông báo document.getElementById('clickme').onclick = function(){
alert('Bạn đã click vào nút này!');
};2. Cách bổ sung / bắt sự kiện trong JavascriptChúng ta có hai cách cơ bản để bắt sự kiện, thứ nhất là mã trực tiếp trong thẻ HTML, thứ hai là sử dụng javascript như chúng ta đã làm ở phần 1 Cách 1. Bắt sự kiện trực tiếp trong thẻ HTMLGiả sử mình có một đoạn mã HTML như sau <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul> Bây giờ ta chỉ cần định nghĩa một hàm có tên là <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>1 là được Bản trình diễn CHẠY function do_something(){
alert('Bạn đã click vào nút này!');
}cách 2. Bắt đầu sự kiện cho một thẻ HTML bằng javascriptĐể thêm sự kiện bằng Javascript, bạn sẽ sử dụng cú pháp như sau elementObject.eventName = function(){
// do something
};in which
Ví dụ. Add event click for button has <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>2 Bản trình diễn CHẠY <html>
<body>
<input type="button" id="show-btn" value="Click me" />
<script language="javascript">
// Lấy đối tượng
var button = document.getElementById("show-btn");
// Thêm sự kiện cho đối tượng
button.onclick = function()
{
alert("Bạn vừa click vào button");
};
</script>
</body>
</html>Cách 3. Bắt đầu sự kiện cho nhiều thẻ HTML bằng JavascriptTrong javascript, trường hợp bạn muốn bắt sự kiện trên nhiều thẻ HTML, thì có thể sử dụng vòng lặp nhé Cú pháp như sau // Lấy đối tượng html, bạn có thể sử dụng các DOM Element khác để lấy
var elementObjs = document.getElementsByTagName('element');
// Lặp qua từng phần tử trong kết quả và gán sự kiện
for (var i = 0; i < elementObjs.length; i++)
{
elementObjs[i].eventName = function()
{
// Do simething
};
}Ví dụ. Add event when click on all cards a class="show" thì thông báo lên câu chào ________số 8_______ Như vậy trong chủ đề này bạn muốn click vào thẻ <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>3 đầu tiên và thẻ <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>3 thứ 3 thì sẽ thông báo câu chào Bài giải CHẠY <html>
<body>
<ul>
<li><a href="#" class="show">Tin công nghệ</a></li>
<li><a href="#">Tin trong nước</a></li>
<li><a href="#" class="show">Tin thời sự</a></li>
</ul>
<script language="javascript">
// Lấy đối tượng
var a_list = document.getElementsByClassName("show");
// Lặp và gán sự kiện
for (var i = 0; i < a_list.length; i++){
a_list[i].onclick = function()
{
alert('Xin chào, bạn vừa click vào tôi');
// return false để khỏi reload trang
return false
};
}
</script>
</body>
</html>3. Các sự kiện (Events) trong javascriptSau khái niệm sự kiện là gì thì chắc chắn bạn đang nóng lòng muốn biết danh sách các sự kiện trong javascript rồi phải không nào? Trong Javascript có rất nhiều sự kiện, và mỗi đối tượng HTML thì lại có những sự kiện khác nhau nên mình chỉ liệt kê được những sự kiện thông tin ứng dụng nhất thôi nhé. Các bảng điều kiện thường được sử dụng trong javascriptSTTEEvent NameDescription1 onclickXảy ra khi nhấp vào thẻ HTML 2 ondbclick Xảy ra khi nhấp đúp chuột vào HTML 3 onchange Xảy ra khi giá trị (value) của HTML change. Thường được sử dụng trong các biểu mẫu thẻ đối input4 onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTMLHTML . 11HTML . 11 . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11HTML . 11 5 onmouseout Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML 6 onmouseenter Tương tự như<ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>57 onmouseleave Tương tự như <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>68 onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML9 onkeydown Xảy ra khi nhập một phím bất kỳ vào ô input10 onload Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó. 11 onkeyupXảy ra khi bạn nhập phím nhưng lúc bạn gõ phím ra sẽ được kích hoạt 12 onkeypress Xảy ra khi bạn nhấn một phím vào ô input14 onblur Xảy ra khi con trỏ chuột rời khỏi ô input15 oncopy Xảy ra khi bạn sao chép nội dung của thẻ16 oncut Xảy ra khi bạn cắt nội dung của thẻ17 onpasteXảy ra khi bạn dán nội dung vào thẻ Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hiện nhé 4. Các ví dụ về xử lý sự kiện trong javascriptBây giờ ta sẽ thực hiện một vài ví dụ nhé Ví dụ 1. Viết chương trình bao gồm một đầu vào ô và một thẻ div được sử dụng để hiển thị nội dung (giá trị của đầu vào ô) khi người dùng nhập vào đầu vào ô Vì đề bài yêu cầu khi nhập dữ liệu vào ô đầu vào nên hiển thị nội dung bên trong thẻ <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>7 nên ta có thể sử dụng sự kiện <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>8. Thứ hai nữa là chúng ta sẽ sử dụng các hàm DOM Element để truy xuất các đối tượng HTML Bản trình diễn CHẠY <html>
<body>
<script language="javascript">
// Hàm show kết quả
function show_result()
{
// Lấy hai thẻ HTML
var input = document.getElementById("message");
var div = document.getElementById("result");
// Gán nội dung ô input vào thẻ div
div.innerHTML = input.value;
}
</script>
<input type="text" id="message" value="" onkeyup="show_result()"/>
<div id="result"></div>
</body>
</html>Nếu như bài này bạn sử dụng sự kiện <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>9 hoặc function do_something(){
alert('Bạn đã click vào nút này!');
}0 thì sẽ có kết quả sai. Lý do là những sự kiện này xảy ra khi bạn nhấn phím xuống nên nó sẽ lấy giá trị chưa được cập nhật. Ngoài ra sự kiện <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>8 xảy ra khi bạn giải phím ra nên nó sẽ nhận được giá trị mới Ví dụ 2. Viết chương trình khi người dùng sao chép nội dung của trang web thì thông báo là bạn đã sao chép thành công Bài này quá dễ phải không nào. Trong danh sách các sự kiện trên, có sự kiện về bản sao nên ta sẽ sử dụng nó để giải bài này Bản trình diễn CHẠY <html>
<body>
<script language="javascript">
// Hàm show kết quả
function show_message()
{
alert("Bạn đã copy thành công");
}
</script>
<h3>Hãy copy dòng chữ dưới đây:</h3>
<div oncopy="show_message()">Chào mừng các bạn đến với website freetuts.net</div>
</body>
</html>Ví dụ 3. Viết chương trình tính tổng của hai số đầu vào (tính tự động) Bài này ta phải tạo 3 ô đầu vào và gán sự kiện <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>8 cho 2 ô đầu vào đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và đưa kết quả vào ô đầu vào thứ 3 Bản trình diễn CHẠY <ul> <li><a href="#" onclick="do_something()">Tin công nghệ</a></li> <li><a href="#" onclick="do_something()">Tin trong nước</a></li> <li><a href="#" onclick="do_something()">Tin thời sự</a></li> </ul>0 5. Lời kếtNhư vậy là mình đã giới thiệu xong danh sách các sự kiện thường dùng trong Javascript. Qua bài này bạn phải hiểu được cơ chế hoạt động của sự kiện, để từ đó biết được nên gán hành động nào vào sự kiện nào |
