How to use the @instructure/ui-dom-utils.addEventListener function in @instructure/ui-dom-utils

activate () {
    if (!this._active) {
      const doc = ownerDocument(this._contextElement)

      this._keyboardFocusRegion.activate()
      this._screenReaderFocusRegion.activate()

      if (this._options.shouldCloseOnDocumentClick) {
        this._listeners.push(addEventListener(doc, 'click', this.captureDocumentClick, true))
        this._listeners.push(addEventListener(doc, 'click', this.handleDocumentClick))

        Array.from(doc.getElementsByTagName('iframe'))
          .forEach((el) => {
            // listen for mouseup events on any iframes in the document
            const frameDoc = getFrameDocumentSafe(el)

            if(frameDoc) {
              this._listeners.push(addEventListener(frameDoc, 'mouseup', (event) => {
                this.handleFrameClick(event, el)
              }))
            }
          })
      }

      if (this._options.shouldCloseOnEscape) {
        this._listeners.push(addEventListener(doc, 'keyup', this.handleKeyUp))

activate () {
    const { defaultFocusElement, shouldContainFocus } = this

    if (!this._active) {
      if (defaultFocusElement || shouldContainFocus) {
        if (shouldContainFocus) {
          this._listeners.push(addEventListener(this.doc, 'keydown', this.handleKeyDown))
        } else {
          this._listeners.push(addEventListener(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown))
          this._listeners.push(addEventListener(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown))
        }

        this._listeners.push(addEventListener(this.doc, 'click', this.handleClick, true))

        this._listeners.push(addEventListener(this.win, 'blur', this.handleWindowBlur, false))
        this._listeners.push(addEventListener(this.doc, 'focus', this.handleFocus, true))

        this._active = true
      }
    }
  }

activate () {
    const { defaultFocusElement, shouldContainFocus } = this

    if (!this._active) {
      if (defaultFocusElement || shouldContainFocus) {
        if (shouldContainFocus) {
          this._listeners.push(addEventListener(this.doc, 'keydown', this.handleKeyDown))
        } else {
          this._listeners.push(addEventListener(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown))
          this._listeners.push(addEventListener(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown))
        }

        this._listeners.push(addEventListener(this.doc, 'click', this.handleClick, true))

        this._listeners.push(addEventListener(this.win, 'blur', this.handleWindowBlur, false))
        this._listeners.push(addEventListener(this.doc, 'focus', this.handleFocus, true))

        this._active = true
      }
    }
  }

addFocusableListeners (focusable, focused) {
    if (!focusable) return

    if (focused && !this._blurListener) {
      this._blurListener = addEventListener(focusable, 'blur', this.handleBlur, true)
    } else if (!this._focusListener) {
      this._focusListener = addEventListener(focusable, 'focus', this.handleFocus, true)
    }
  }

addFocusableListeners (focusable, focused) {
    if (!focusable) return

    if (focused && !this._blurListener) {
      this._blurListener = addEventListener(focusable, 'blur', this.handleBlur, true)
    } else if (!this._focusListener) {
      this._focusListener = addEventListener(focusable, 'focus', this.handleFocus, true)
    }
  }

activate () {
    const { defaultFocusElement, shouldContainFocus } = this

    if (!this._active) {
      if (defaultFocusElement || shouldContainFocus) {
        if (shouldContainFocus) {
          this._listeners.push(addEventListener(this.doc, 'keydown', this.handleKeyDown))
        } else {
          this._listeners.push(addEventListener(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown))
          this._listeners.push(addEventListener(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown))
        }

        this._listeners.push(addEventListener(this.doc, 'click', this.handleClick, true))

        this._listeners.push(addEventListener(this.win, 'blur', this.handleWindowBlur, false))
        this._listeners.push(addEventListener(this.doc, 'focus', this.handleFocus, true))

        this._active = true
      }
    }
  }

activate () {
    const { defaultFocusElement, shouldContainFocus } = this

    if (!this._active) {
      if (defaultFocusElement || shouldContainFocus) {
        if (shouldContainFocus) {
          this._listeners.push(addEventListener(this.doc, 'keydown', this.handleKeyDown))
        } else {
          this._listeners.push(addEventListener(this.firstTabbable || defaultFocusElement, 'keydown', this.handleFirstTabbableKeyDown))
          this._listeners.push(addEventListener(this.lastTabbable || defaultFocusElement, 'keydown', this.handleLastTabbableKeyDown))
        }

        this._listeners.push(addEventListener(this.doc, 'click', this.handleClick, true))

        this._listeners.push(addEventListener(this.win, 'blur', this.handleWindowBlur, false))
        this._listeners.push(addEventListener(this.doc, 'focus', this.handleFocus, true))

        this._active = true
      }
    }
  }