javascript can ban gif Javascript căn bản

Quảng cáo

Tinohost giảm 30% VPS/Hosting các bạn ạ. Đây là nhà cung cấp đứng top tại Việt Nam, xem tại đây

Hàm addEventListener() trong Javascript

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng addEventListener trong Javascript, qua đó sẽ giúp bạn hiểu ý nghĩa của hàm addEventListener và cách dùng nó để thêm các sự kiện javascript.

Ở các bài học trước chúng ta đã biết cách sử dụng Javascript để thêm một sự kiện vào một đối tượng HTML, tuy nhiên mình chỉ mới giới thiệu cách thêm trực tiếp trong thẻ HTML. Vì vậy, trong bài này mình sẽ hướng dẫn thêm một cách khác đó là sử dụng hàm addEventListener() để thêm một sự kiện js.

Quảng cáo

1. addEventListener là gì?

addEventListener là một phương thức được tích hợp sẵn vào các đối tượng HTML thông qua cơ chế DOM. Khi sử dụng addEventListener thì bạn có thể bổ sung rất nhiều hành động vào sự kiện tại nhiều thời điểm khác nhau.

Ví dụ mình đang làm form đăng nhập, mình muốn khi người dùng click vào nút đăng nhập thì sẽ thực hiện thao tác kiểm tra các ràng buộc dữ liệu, sau đó thông báo đến người dùng là thành công hoặc thất bại.

Cú pháp như sau:

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
elementObject.addEventListener('eventName', function(e){
    // do something
});

Ví dụ: Thêm sự kiện click cho thẻ input.

Quảng cáo

<input type="button" id="btn" value="Click me"/>
<script>
    var obj = document.getElementById('btn');
    obj.addEventListener('click', function(){
        alert('Bạn đã đúp chuột vào thẻ input này');
    });
</script>

2. Cách dùng 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ụ: 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.

Demo RUN
<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.

Quảng cáo

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
Demo RUN
<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>

3. Dùng addEventListener thêm sự kiện cho window

Đối tượng window ta có thể ví nó như cửa sổ trình duyệt browser nên nó cũng 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.

Demo RUN
<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>

4. Truyền tham số vào sự kiện 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().

Demo RUN
// 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);
}

Lời kết: Bạn có thể sử dụng cách thêm sự kiện ở 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().

Quảng cáo

Các chủ đề liên quan:

Bài viết cùng chuyên mục:

Quảng cáo

Top