Thắc mắc về js resize window

[ttn]

Chào các bạn, mình đang có thắc mắc như này, mình có tạo 1 ví dụ trên jsbin:
https://jsbin.com/gawobuz/
Khi màn hình lớn hơn 500 thì click vào button sẽ toggle cái class red vào cái button đấy, còn màn nhỏ hơn 500 thì ko làm gì cả
Sao code của mình thì khi resize window nhỏ hơn 500 nó cũng chạy nhỉ, mình có thiếu cái điều kiện gì ko vậy?

[drgnz]

Gắn vô mà quên gỡ ra chứ s :3

p.addEventListener( 'click', () => {
            console.log('b');
            p.classList.toggle( 'red' );
        });

Xem b nó log ra nhiu lần nhé

[ttn]

ủa sao nó in ra nhiều thế nhỉ, chỗ này mình ko hiểu bạn giải thích giúp mình đc ko

[Dark.Hades (Ichiro)]

addEventListener
Có nghĩa là cứ xảy ra sự kiện là nó lại thêm 1 hàm vào trong list callback. Và nó sẽ không xóa cái sự kiện đằng trước đi.
Trường hợp của bạn phải dùng hàm on<event> để xử lí.
Ví dụ: https://stackoverflow.com/questions/641857/javascript-window-resize-event

[Dark.Hades (Ichiro)]

Fixed code:

let span = document.getElementsByTagName( 'span' )[0],
    p = document.getElementsByTagName( 'button' )[0];

let fun = () => {
  p.onclick = null;
  span.innerHTML = window.innerWidth + 'px';
  if( window.innerWidth > 500 ){

    p.onclick = () => {
      console.log('b');
      p.classList.toggle( 'red' );
    };

  }
}

window.onload = fun;

window.onresize = fun;

[ttn]

à, giống kiểu phải để default 1 event đúng ko nhỉ, cám ơn bạn nhé
mình lạm dụng hàm addEventListener quá