Event.target trong javascript

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à event, là một tác động nào đó lên các đối tượng HTML thông qua cấu trúc DOM.

Tin công nghệ

Tin trong nước

Tin thời sự

Bây giờ ta chỉ cần định nghĩa môt hàm có tên là

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

1 là được.

Demo RUN

function do_something[]{
    alert['Bạn đã click vào nút này!'];
}

Cách 2: Bắt 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ư title, onchange, ...

Ví dụ: Thêm sự kiện click cho button có

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

2

Demo RUN

    
        
        
        
            // Lấy đối tượng
            var button = document.getElementById["show-btn"];
            
            // Thêm sự kiện cho đối tượng
            button. title = function[]
            {
              alert["Bạn vừa click vào button"];
            };
        
    

Cách 3: Bắt sự kiện cho nhiều thẻ HTML bằng Javascrip

Trong 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ụ: 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.

    
Tin công nghệ
    
Tin trong nước
    
Tin thời sự
  

Như vậy trong đề bài này muốn khi click vào thẻ

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

3 đầu tiên và thẻ

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

3 thứ 3 thì sẽ thông báo câu chào.

Bài giải RUN

    
      	

            
Tin công nghệ
            
Tin trong nước
            
Tin thời sự
        
  
      	  
            // 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]. title = function[]
                {
                  	alert['Xin chào, bạn vừa click vào tôi'];
                  
                  	// return false để khỏi reload trang
                    return false
                };
            }
        
    

3. Các sự kiện [Events] trong javascrpt

Sau khái niệm sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết danh sách các sự kiện trong javascript rồi phải không nào? Ok ta bắt đầu ngay luôn.

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 dụng nhất thôi nhé.

Bảng các sự kiện thường dùng trong javascript.

STTEvent NameDescription1 titleXảy ra khi click vào thẻ HTML2ondbclickXảy ra khi double click vào thẻ HTML3onchangeXảy ra khi giá trị [value] của thẻ HTML đổi. Thường dùng trong các đối thẻ form input4onmouseoverXảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML5onmouseoutXảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML6onmouseenterTương tự như

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

57onmouseleaveTương tự như

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

68onmousemoveXảy ra khi con chuột di chuyển bên trong thẻ HTML9onkeydownXảy ra khi gõ một phím bất kì vào ô input10onloadSả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 đó.11onkeyupXảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt12onkeypressXảy ra khi bạn nhấn môt phím vào ô input14onblurXảy ra khi con trỏ chuột rời khỏi ô input15oncopyXảy ra khi bạn copy nội dung của thẻ16oncutXảy ra khi bạn cắt nội dung của thẻ17onpasteXả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 hành nhé.

4. Các ví dụ về xử lý sự kiện trong javascript

Bây giờ ta sẽ thực hành một vài ví dụ nhé.

Ví dụ 1: Viết chương trình gồm một ô input và một thẻ div dùng để hiển thị nội dung [giá trị của ô input] khi người dùng gõ vào ô input

Vì đề bài yêu cầu khi nhập dữ liệu vào ô input thì hiển thị nội dung bên trong thẻ

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

7 nên ta có thể sử dụng sự kiện

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

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.

Demo RUN

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

  

Nếu như bài này bạn sử dụng sự kiện

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

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. Còn sự kiện

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

8 xảy ra khi bạn nhả phím ra nên nó sẽ lấy được giá trị mới.

Ví dụ 2: Viết chương trình khi người dùng copy nội dung của website thì thông báo là bạn đã copy 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 thì có sự kiện oncopy nên ta sẽ sử dụng nó để giải bài này.

Demo RUN

  
    
      // Hàm show kết quả
      function show_message[]
      {
        alert["Bạn đã copy thành công"];
      }
    
    
Hãy copy dòng chữ dưới đây:
    
Chào mừng các bạn đến với website freetuts.net
  

Ví dụ 3: Viết chương trình tính tổng của hai số nhập vào [tính tự động]

Bài này ta phải tạo 3 ô input và gán sự kiện

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

8 cho 2 ô input đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và in kết quả vào ô input thứ 3.

Demo RUN

  
Tin công nghệ
  
Tin trong nước
  
Tin thời sự

0

5. Lời kết

Như 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.