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

Question

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.

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

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.

Dưới đây là danh sách các sự kiện 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.
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ử.

mouseenter	Sự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần 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ử.

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ó.
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ó.

Sự kiện của các phần tử Form.

Event	Mô tả
submit	Khi người dùng submit (Gửi đi) nội dung của <form>.
focus	Khi người dùng tập trung (focus) vào một phần tử, ví dụ <input>.
blur	Khi người dùng rời khỏi một phần tử, ví dụ <input>.

Sự kiện bàn phím:

Event	Mô tả
keydown	Sự kiện xẩy ra khi người dùng nhấn một phím (key) xuống.
keyup	Sự kiện xẩy ra khi người dùng nhả tay ra khỏi một phím.

keypress	Sự kiện xẩy ra khi người dùng nhấn (press) vào phím (Hoàn thành 2 hành động, nhấn xuống và nhả ra).

Các sự kiện của Document.

Event	Mô tả
DOMContentLoaded	Khi mà nội dung HTML đã được tải (loaded) và đã được xử lý. Mô hình DOM đã được tạo ra hoàn chỉnh.

Các sự kiện CSS:

Event	Mô tả
animationstart	Sự kiện xẩy ra khi quá trình hoàn hình CSS bắt đầu.
animationend	Sự kiện xẩy ra khi quá trình hoạt hình CSS hoàn thành.
animationiteration	Sự kiện xẩy ra khi quá trình hoạt hình CSS lặp lại.

Xử lý sự kiện:

Để xử lý sự kiện, bạn cần phải gắn sự kiện với một bộ xử lý (handler), Bộ xử lý có thể là một hàm. Khi sự kiện xẩy ra bộ xử lý sẽ được gọi để hoạt động. Bộ xử lý (handler) là cách để chạy các mã Javascript tương ứng với các hành động của người dùng.

Bộ xử lý (handler) có thể được sét trong HTML với thuộc tính (attribute) on{event}. Chẳng hạn sự kiện click:




<input value="Click me" onclick="alert('Click!')" type="button">

<input value="Click me" onclick="someFunction()" type="button">

Đối tượng this đại diện cho phần tử phát ra sự kiện.



<input value="Click me" onclick="someFunction(this)" type="button">

Khi sự kiện xẩy ra, 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ố.



<input value="Click me" onclick="someFunction(event)" type="button">

Bạn cũng có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.



var target =  event.target;

2- Ví dụ với các sự kiện

Sự kiện đơn giản và hay bắt gặp là sự kiện người dùng nhấp chuột (click) trên một phần tử. Dưới đây là một ví dụ đơn giản, người dùng nhấn vào nút "=" để tính tổng 2 số.

onclick-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function doCalculate()  {
             var a = document.getElementById("a").value; // A String value
             var b = document.getElementById("b").value; // A String value

             var c = Number(a) + Number(b);

             document.getElementById("c").value = c;
         }
      </script>

   </head>
   <body>

      <h3>Click Event example</h3>

      <input id = "a" type="text" value= "100"/> <br/>
      + <br/>
      <input id = "b" type="text" value = "200"/> <br/>

      <button onclick="doCalculate()"> = </button> <br/>

      <input id = "c" type="text" value = ""/>

   </body>
</html>

-

Đối tượng 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


<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(target)  {
             var random = Math.round(Math.random() * 100) + 200;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Event with 'this' object</h3>

      <button onclick="changeSize(this)">Click Me to Change Size</button>

   </body>
</html>

-

Khi sự kiện xẩy ra một đối tượng 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.



<input value="Click me" onclick="someFunction(event)" type="button">

mouse-events-example.html


<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mouse-events-example.js"></script>
    <style>
        .my-div {
            width: 290px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>

    <h3>Mouse Events (Enter, Move, Leave)</h3>

    <div class="my-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmousemove="mousemoveHandler(event)">
    </div>

    <h3>Mouse position</h3>
    <div style="color:red;" id="position-div">

    </div>

    <h3>Statistics</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>

</html>

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 +"<br/>" //
               +
               "offsetY: " + evt.offsetY;

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

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

-

Bạn có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.

event-obj-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(evt)  {
             var target = evt.target;

             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Access 'target' object via 'event' object</h3>

      <button onclick="changeSize(event)">Click Me to Change Size</button>

   </body>
</html>

-

Ví dụ một hàm xử lý với nhiều tham số.

multi-params-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(borderColor, target, evt, bgColor)  {
             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
             target.style.borderColor = borderColor;
             target.style.backgroundColor = bgColor;
         }
      </script>

   </head>
   <body>

      <h3>A Handler has multiple parameters</h3>
      <a href="">Reset</a> <br/><br/>

      <button onclick="changeSize('red', this, event, 'green')">Click Me</button>

   </body>
</html>