Hướng dẫn event.target javascript - event.target javascript

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- Javascript Events

Sự kiện (event) là một tín hiệu cho thấy một cái gì đó đã xẩy ra. Chẳng hạn bạn nhấn chuột vào một nút (button), hoặc bạn đóng trình duyệt,.. Tất cả các node của DOM phát ra (generate) các tín hiệu như vậy, nhưng có những sự kiện khác ngoài DOM chẳng hạn sự kiện bạn đóng cửa sổ trình duyệt. DOM phát ra (generate) các tín hiệu như vậy, nhưng có những sự kiện khác ngoài DOM chẳng hạn sự kiện bạn đóng cửa sổ trình duyệt.

Dưới đây là danh sách các sự kiện DOM hữu ích nhất: DOM hữu ích nhất:

Các sự kiện chuột (Mouse):

Sự kiện	Mô tả
click	Sự kiện xẩy ra khi người dùng nhấp (click) trên một phần tử (element).
contextmenu	Sự kiện xẩy ra khi người dùng nhấn phải chuột (right-clicks) vào phần tử để mở ra một context-menu. context-menu.
dblclick	Sự kiện xẩy ra khi người dùng nhấn kép (double-clicks) trên một phần tử.
mousedown	Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mouseup	Sự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử.
mousedown	Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mouseup	Sự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử.
mousedown	Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mousedown	Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mouseup	Sự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử.

mouseenter

Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử.	Mô tả
click	Sự kiện xẩy ra khi người dùng nhấp (click) trên một phần tử (element). submit (Gửi đi) nội dung của .
contextmenu	Sự kiện xẩy ra khi người dùng nhấn phải chuột (right-clicks) vào phần tử để mở ra một context-menu. .
dblclick	Sự kiện xẩy ra khi người dùng nhấn kép (double-clicks) trên một phần tử. .

 

Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử.	Mô tả
mouseleave	Sự kiện xẩy ra khi con trỏ (pointer) di chuyển ra khỏi một phần tử.
mousemove	Sự kiện xẩy ra khi con trỏ di chuyển trên bề mặt của phần tử.
mousedown	Sự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.

mouseup

Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử.	Mô tả
mouseleave	Sự kiện xẩy ra khi con trỏ (pointer) di chuyển ra khỏi một phần tử. HTML đã được tải (loaded) và đã được xử lý. Mô hình DOM đã được tạo ra hoàn chỉnh.

mousemove

Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử.	Mô tả
mouseleave	Sự kiện xẩy ra khi con trỏ (pointer) di chuyển ra khỏi một phần tử. CSS bắt đầu.
mousemove	Sự kiện xẩy ra khi con trỏ di chuyển trên bề mặt của phần tử. CSS hoàn thành.
mouseout	Sư kiện xẩy ra khi người dùng di chuyển con trỏ ra khỏi một phần tử hoặc ra khỏi một trong những phần tử con của nó. CSS lặp lại.

mouseover

Sự kiện xẩy ra khi người dùng di chuyển con trỏ vào một phần tử hoặc di chuyển vào một trong các phần tử con của nó. Javascript tương ứng với các hành động của người dùng.

Sự kiện của các phần tử Form.HTML với thuộc tính (attribute) on{event}. Chẳng hạn sự kiện click:

Eventthis đại diện cho phần tử phát ra sự kiện.

submit Javascript tạo ra đối tượng event và bạn có thể sử dụng nó như một giá trị của tham số.

Khi người dùng submit (Gửi đi) nội dung của . event.

var target =  event.target;

focus

Khi người dùng tập trung (focus) vào một phần tử, ví dụ . "=" để tính tổng 2 số.

onclick-example.html

   
      

      

   
   

      
Click Event example

       

      + 

       


       =  


      

   


 

blur

Khi người dùng rời khỏi một phần tử, ví dụ . this chính là phần tử phát ra sự kiện. Bạn có thể truyền (pass) đối tượng này vào hàm xử lý sự kiện.

this-obj-example.html

   
      

      

   
   

      
Event with 'this' object

      Click Me to Change Size

   

blur

Khi người dùng rời khỏi một phần tử, ví dụ . event được Javascript tạo ra, nó chứa các thông tin liên quan tới sự kiện. Ví dụ với sự kiện chuột đối tượng event có thể chứa các thông tin như vị trí chuột so với trình duyệt, vị trí chuột so với phần tử phát ra sự kiện,... Bạn có thể sử dụng đối tượng event để truyền vào (pass) hàm xử lý sự kiện.

mouse-events-example.html

    

    
    




    
Mouse Events (Enter, Move, Leave)

    

    

    
Mouse position
    


    

    
Statistics
    


    





 

mouse-events-example.js

var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;


function mouseleaveHandler(evt) {
    leaveCount += 1;

    showPosition(evt);
    showStatistics();
}

function mouseenterHandler(evt) {
    enterCount += 1;

    showPosition(evt);
    showStatistics();
}

function mousemoveHandler(evt) {
    moveCount += 1;

    showPosition(evt);
    showStatistics();
}




function showPosition(evt) {
    var html = "offsetX: " + evt.offsetX +"
" //
               +
               "offsetY: " + evt.offsetY;

    document.getElementById("position-div").innerHTML = html;
}

function showStatistics() {
    var html =
        "enterCount:" + enterCount + "
" //
        +
        "moveCount:" + moveCount + "
" //
        +
        "leaveCount:" + leaveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 

blur

Khi người dùng rời khỏi một phần tử, ví dụ . event.

event-obj-example.html

   
      

      

   
   

      
Access 'target' object via 'event' object

      Click Me to Change Size

   


 

blur

Khi người dùng rời khỏi một phần tử, ví dụ .

multi-params-example.html

0