hêm sự kiện (Event) bằng Javascript - Javascript căn bản
Trong bài tìm hiểu sự kiện trong javascript chúng ta đã tìm hiểu cách gán một sự kiện và xử lý sự kiện đó. Tuy nhiên chúng ta vẫn còn một cách khác khá hay và nó rất giống với jQuery đó là sử dụng code javascript để thiết lập một sự kiện cho thẻ HTML. Nhung trước khi vào vấn đề chính chúng ta sẽ ...
Trong bài tìm hiểu sự kiện trong javascript chúng ta đã tìm hiểu cách gán một sự kiện và xử lý sự kiện đó. Tuy nhiên chúng ta vẫn còn một cách khác khá hay và nó rất giống với jQuery đó là sử dụng code javascript để thiết lập một sự kiện cho thẻ HTML.
Nhung trước khi vào vấn đề chính chúng ta sẽ tìm hiểu một lý do tại sao chúng ta nên thêm sự kiện bằng Javascript thay vì gán trực tiếp nó trong code HTML đã nhé.
1. Tình huống thêm sự kiện trong HTML không tốt
Giả 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>
Trong đoạn code này mình đã gán một hàm tên là do_something() vào các thẻ a. Như vậy giả sử ta có 100 thẻ a như vậy thì ta phải gán 100 lần, sau một ngày nào đó bạn sửa lại tên của function từ do_something() sang do_validate() thì bắt buộc bạn phải replace 100 lần. Điều này là một cơn ác mộng phải không nào, chưa tính đến vụ cấu trúc như vậy sẽ không tối ưu SEO Onpage nữa.
Để giải quyết vấn đề này thì chúng ta sẽ sử dụng Javascript để thêm sự kiện cho các thẻ HTML đó.
2. Thêm sự kiện cho một thẻ HTML bằng javascript
Để thêm sự kiện bằng Javascript thì bạn sẽ sử dụng cú pháp như sau:
elementObject.eventName = function(){
// do something
};
Trong đó:
- elementObject là đối tượng HTML mà chúng ta sử dụng DOM để lấy.
- eventName là tên của event như onclick, onchange, ...
Ví dụ: Thêm sự kiện click cho button có id="show-btn"
XEM DEMO
<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>
3. Thêm sự kiện cho nhiều thẻ HTML bằng Javascrip
Ở phần 2 là chúng ta sử dụng phương thức document.getElementById() nên kết quả nó sẽ trả về chỉ là một đối tượng nên có thể gán trược tiếp button.onclick = function(){}. Nhưng nếu bạn sử dụng truy vấn DOM theo selector thì kết quả nó sẽ trả về một mảng các đối tượng, lúc này ban phải sử dụng vòng lặp để thiết lập sự kiện.
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
};
}
class="show" thì thông báo lên câu chào.
<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>
Như vậy trong đề bài này muốn khi click vào thẻ a đầu tiên và thẻ a thứ 3 thì sẽ thông báo câu chào.
Bài giải: XEM DEMO
<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>
Trong ví dụ này bạn lưu ý mình có return false ở phần thực hiện sự kiện vì mình muốn khi click vào thì thẻ a thì không thực hiện chuyển hướng (xem lại bài return true/false của event).
4. Lời kết
Tóm lại trong bài bạn cần hiểu lý do tại sao nên gán sự kiện bằng Javascript thay vì gán trực tiếp bằng mã HTML, đồng thời hiểu và phân biệt được khi nào thì dùng vòng lặp để gán sự kiện và khi nào có thể gán trực tiếp mà không cần sử dụng vòng lặp.
- Nếu kết quả DOM Element trả về một object thì ta gán sự kiện trực tiếp.
- Nếu kết quả DOM Element trả về một mảng các object thì ta phải sử dụng vòng lặp để lặp qua từng đối tượng để gán sự kiện.
Các ví dụ trong bài mình làm khá đơn giản mục đích giúp bạn dễ học hơn, sau serie này thì sẽ có một serie bài tập javascript để các bạn ôn lại kiến thức. Hy vọng đây là một serie có ích cho các bạn.
