Thêm sự kiện (Event) bằng Javascript

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
    };
}

Ví dụ: Thêm sự kiện khi click vào tất cả các thẻ a có 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ênthẻ a thứ 3 thì sẽ thông báo câu chào.

Bài giảiXEM 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.

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM