Xử lý sự kiện (Event) trong Javascript

Xem thêm các chuyên mục:

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:
Mouse Events:
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 Description
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 Description
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:

Để phản ứng với 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 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>

 

3- Có thể bạn quan tâm

  • TODO

Xem thêm các chuyên mục: