Vấn đề addEventListener và Annymous function

#1

Mình có thắc mắc thế này

  <button type="button" name="button">Button1</button>
  <button type="button" name="button">Button2</button>
  <button type="button" name="button">Button3</button>
  <script type="text/javascript">
  (function() {

    function test() {
      console.log('test1');
    }

    var test1 = {
      cl: function() {
        console.log('test3');
      }
    }

    var btn1 = document.getElementsByTagName('button')[0];
    var btn2 = document.getElementsByTagName('button')[1];
    var btn3 = document.getElementsByTagName('button')[2];

    btn1.addEventListener('click', test());
    btn2.addEventListener('click', function() {
      console.log('test2');
    });
    btn3.addEventListener('click', test1.cl());
  }());
  </script>

Tại sao khi truyền anonymous function vào thì nó lại hoạt động mà còn khi truyền hàm test() và thì nó lại hoạt động ngay cả khi mình không click và chỉ hoạt động 1 lần khi load trang thôi còn những lần sau nó không hoạt động được nữa

#2

Bạn chỉ truyền cái function chứ đừng gọi nó ngay lúc add listener

#3

Câu này bạn viết lại đi, đọc không hiểu ý bạn là sao hết, dấu câu hoặc ngắt câu cho dễ hiểu.

Sao bạn không thay ngay hàm test vô chỗ anonymous function của bạn để kiểm tra mà lại đẻ ra thêm một cái rồi so sách? Nó nằm khác dòng code là đã khác nhau rồi. Mà bạn gọi test thôi chứ, test.c1 nữa nghĩa là thế nào?

#4

Ý mình là tại sao khi truyền 1 hàm vào 1 event thì nó lại chạy khi mà mình không click vào và sau đó click vào nó không thực thi nữa.
Còn khi truyền 1 anonymous function vào thì nó lại hoạt động.

#5

Ý em muốn hỏi là tại sao nó lại như thế đó :smiley:

#6

JavaScript có một trò rất rách việc nhé, vì function của nó cũng là một Object nên cái kiểu gọi của nó đôi lúc làm cho một số bạn lúng túng. Người ta giải thích rất lôi thôi nhưng tạm hiểu gọi một hàm muốn gọi là làm gì thì bỏ ngoặc đi, còn muốn lấy giá trị nó trả về thì cứ để nguyên ngoặc.

Đoạn code kia bỏ cặp dấu ngoặc ở hàm test.cl() khi gọi đi là xong.

btn3.addEventListener('click', test1.cl);

2 Likes
#7

Mọi thứ trong js đều là Object. Nhiều khi nó gây đau đầu

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?