03/08/2018, 09:55

Hàm addEventListener() trong Javascript

Bài trước chúng ta đã học cách sử dụng Javascript để thêm một sự kiện vào một đối tượng HTML nhưng chúng ta sử dụng cú pháp gán bình thường. Vậy ...

Bài trước chúng ta đã học cách sử dụng Javascript để thêm một sự kiện vào một đối tượng HTML nhưng chúng ta sử dụng cú pháp gán bình thường. Vậy trong bài này chúng ta tìm hiểu một cách cao siêu hơn đó là sử dụng hàm addEventListener() để thêm một sự kiện vào đói tượng HTML.

1. Hàm addEventListener() trong Javascript

Để thêm sự kiện cho đối tượng HTML thì chúng ta có cú pháp như sau (xem lại bài thêm sự kiện bằng javascript):

elementObject.eventName  = function(){
    // do something
};

Nhưng nếu bạn sử dụng hàm addEventListener() thì cú pháp như sau:

elementObject.addEventListener('eventName', function(e){
    // do something
});

Trong đó:

  • eventName là tên của sự kiện bỏ đi chữ on, ví dụ click, change, ...
  • function ở tham số thứ hai chính là hàm sẽ được chạy khi sự kiện eventName được kích hoạt 
Ví dụ 1: Xây dựng chức năng khi nhập dữ liệu vào ô input thì hiển thị giá trị của ô input đó ra bên ngoài

Với bài này ta sử dụng sự kiện onkeyup và bỏ đi chữ on sẽ là keyup.

Bà giải: XEM DEMO

<html>
    <body>
        <input type="text" id="txt-val" value="" />
        <div id="result"></div>
        <script language="javascript">
            // Lấy đối tượng
            var input = document.getElementById("txt-val");
            
            // Thêm sự kiện cho đối tượng
            input.addEventListener('keyup', function(){
                // Gán giá trị vào div
          	    document.getElementById('result').innerHTML = input.value;
            });
        </script>
    </body>
</html>

Như ta biết mỗi sự kiện có thể có nhiều hành động nên bạn có thể bổ sung hành động cho một sự kiện và cú pháp tương tự như trên.

Ví dụ 2: Bổ sung thêm chức năng ở ví dụ 1 như sau: nếu chiều dài của chuỗi nhập vào nhiều hơn 5 ký tự thì thông báo 

Bài giải: XEM DEMO

<html>
    <body>
        <input type="text" id="txt-val" value="" />
        <div id="result"></div>
        <script language="javascript">
            // Lấy đối tượng
            var input = document.getElementById("txt-val");
            
            // Thêm sự kiện cho đối tượng
            input.addEventListener('keyup', function(){
                // Gán giá trị vào div
          	    document.getElementById('result').innerHTML = input.value;
            });
          
          	// Bổ sung hành động nữa
          	input.addEventListener('keyup', function(){
                if (input.value.length > 5){
                  	alert("Bạn đã nhập nhiều hơn 5 ký tự");
                }
            });
        </script>
    </body>
</html>

2. Thêm sự kiện cho đối tượng window

Đối tượng window ta có thể ví nó như cửa sổ trình duyệt browser nên nó sẽ có một số sự kiện riêng, điển hình là sự kiện resize browser. Như vậy với hàm addEventListener() ta cũng có thể thêm sự kiện cho window.

Ví dụ: XEM DEMO

<html>
    <body>
      	<h4>Bạn hãy zoom trình duyệt</h4>
        <div id="result"></div>
        <script language="javascript">
          window.addEventListener("resize", function(){
            document.getElementById("result").innerHTML = "Bạn vừa zoom Browser";
          });
        </script>
    </body>
</html>

3. Truyền tham số vào Event trong hàm addEventListener()

Nếu bạn muốn truyền tham số vào thì bắt buộc bạn phải tạo một hàm khác rồi gọi nó từ hàm addEventListener().

Ví dụ: XEM DEMO

// Lấy đối tượng
var button = document.getElementById("btn");

// Thêm sự kiện cho đối tượng
button.addEventListener('click', function(){
    do_something(2, 3);
});

    function do_something(a, b)
{
  alert( a + b);
}

4. Lời kết

Thực tế bạn có thể sử dụng cách thêm sự kiện đã học ở bài trước nhưng sẽ không chuyên nghiệp và hay bằng cách sử dụng hàm addEventListener(). Từ hàm này bạn có thể liên tưởng qua Events trong jQuery có cách xử lý y chang như vậy nên sau này nếu đi phỏng vấn có hỏi câu này thì bạn trả lời bản chất xử lý sự kiện trong jQuery cũng sử dụng hàm này nhé.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

0