Different events for different breakpoint sizes

Trying to make an element clickable on a small breakpoint (mobile devices or skinny browser window), but hoverable on a large breakpoint

I'm creating a different event depending on screen size, but when resizing from Large to Small size, the Large size event still triggers.

I think I need to remove the event listener when the screen size changes, but have gotten stuck doing this.

Codepen example: https://codepen.io/777333/pen/wvoZYga

let hello = document.querySelector('.hello')
let width = $(window).width()
$(window).bind("load resize", function() {
  let width = $(window).width()
  if ( width < 600 ) {
    hello.onclick = () => {
      alert('mobile')
    }
  } else {
    hello.onmouseover = () => {
      alert('desktop')
    }
  }
});