Use arrow functions to preserve this in event listeners

src/javascripts/components/cookie-banner.mjs

@@ -38,11 +38,11 @@ CookieBanner.prototype.init = function () {
     this.$cookieBanner.removeAttribute('hidden')
   }
 
-  this.$acceptButton.addEventListener('click', this.acceptCookies.bind(this))
-  this.$rejectButton.addEventListener('click', this.rejectCookies.bind(this))
+  this.$acceptButton.addEventListener('click', () => this.acceptCookies())
+  this.$rejectButton.addEventListener('click', () => this.rejectCookies())
 
   this.$cookieBannerHideButtons.forEach(($cookieBannerHideButton) => {
-    $cookieBannerHideButton.addEventListener('click', this.hideBanner.bind(this))
+    $cookieBannerHideButton.addEventListener('click', () => this.hideBanner())
   })
 }
 
@@ -75,7 +75,7 @@ CookieBanner.prototype.revealConfirmationMessage = function (confirmationMessage
   if (!confirmationMessage.getAttribute('tabindex')) {
     confirmationMessage.setAttribute('tabindex', '-1')
 
-    confirmationMessage.addEventListener('blur', function () {
+    confirmationMessage.addEventListener('blur', () => {
       confirmationMessage.removeAttribute('tabindex')
     })
   }

src/javascripts/components/cookies-page.mjs

@@ -23,7 +23,7 @@ CookiesPage.prototype.init = function () {
   // Show submit button
   this.$cookieForm.querySelector('.js-cookies-form-button').removeAttribute('hidden')
 
-  this.$cookieForm.addEventListener('submit', this.savePreferences.bind(this))
+  this.$cookieForm.addEventListener('submit', (event) => this.savePreferences(event))
 }
 
 CookiesPage.prototype.savePreferences = function (event) {

src/javascripts/components/example-page.mjs

@@ -16,8 +16,8 @@ ExamplePage.prototype.preventFormSubmission = function ($form) {
   if (!$form) {
     return false
   }
-  $form.addEventListener('submit', function (e) {
-    e.preventDefault()
+  $form.addEventListener('submit', (event) => {
+    event.preventDefault()
   })
 }
 

src/javascripts/components/example.mjs

@@ -26,7 +26,7 @@ Example.prototype.init = function () {
     return iFrameResize({ scrolling: 'omit' }, $module)
   }
 
-  $module.addEventListener('load', function () {
+  $module.addEventListener('load', () => {
     try {
       iFrameResize({ scrolling: 'omit' }, $module)
     } catch (err) {

src/javascripts/components/navigation.mjs

@@ -77,7 +77,7 @@ Navigation.prototype.bindUIEvents = function () {
   const $navToggler = this.$navToggler
   const $navButtons = this.$navButtons
 
-  $navToggler.addEventListener('click', function (event) {
+  $navToggler.addEventListener('click', () => {
     if (this.mobileNavOpen) {
       $nav.classList.remove(navActiveClass)
       $navToggler.classList.remove(navMenuButtonActiveClass)
@@ -95,10 +95,10 @@ Navigation.prototype.bindUIEvents = function () {
 
       this.mobileNavOpen = true
     }
-  }.bind(this))
+  })
 
   $navButtons.forEach(($button) => {
-    $button.addEventListener('click', function (event) {
+    $button.addEventListener('click', () => {
       const $nextSubNav = $button.parentNode.querySelector(subNavJSClass)
 
       if ($nextSubNav) {
@@ -124,12 +124,12 @@ Navigation.prototype.init = function () {
     this.mql = window.matchMedia('(min-width: 40.0625em)')
 
     if ('addEventListener' in this.mql) {
-      this.mql.addEventListener('change', this.setHiddenStates.bind(this))
+      this.mql.addEventListener('change', () => this.setHiddenStates())
     } else {
       // addListener is a deprecated function, however addEventListener
       // isn't supported by Safari < 14. We therefore add this in as
       // a fallback for those browsers
-      this.mql.addListener(this.setHiddenStates.bind(this))
+      this.mql.addListener(() => this.setHiddenStates())
     }
   }
 

src/javascripts/components/search.mjs

@@ -172,7 +172,7 @@ Search.prototype.init = function () {
   const $input = $module.querySelector('.app-site-search__input')
 
   // Ensure if the user stops using the search that we do not send tracking events
-  $input.addEventListener('blur', function (event) {
+  $input.addEventListener('blur', () => {
     clearTimeout(inputDebounceTimer)
   })
 

src/javascripts/components/tabs.mjs

@@ -27,7 +27,7 @@ AppTabs.prototype.init = function () {
 
   // Add bindings to desktop tabs
   this.$desktopTabs.forEach(($tab) => {
-    $tab.addEventListener('click', this.onClick.bind(this))
+    $tab.addEventListener('click', (event) => this.onClick(event))
   })
 
   // Reset all tabs and panels to closed state
@@ -80,8 +80,7 @@ AppTabs.prototype.enhanceMobileTabs = function () {
     $button.classList.add('app-tabs__heading-button')
     $button.innerHTML = $tab.innerHTML
     // ...bind controls...
-    $button.bindClick = this.onClick.bind(this)
-    $button.addEventListener('click', $button.bindClick)
+    $button.addEventListener('click', (event) => this.onClick(event))
     // ...and replace the anchor with the button
     $tab.parentNode.appendChild($button)
     $tab.parentNode.removeChild($tab)