How to use the metal-dom.on function in metal-dom

var nextScrollTick = function(fn, opt_el) {
	var handler = dom.on(opt_el || document, 'scroll', function() {
		fn();
		handler.removeListener();
	});
};

attached() {
    super.attached();
    this.setAriaAttributes_();
    this.eventHandler_.add(
      dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(document, 'click', this.handleDocClick_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(
        window,
        'resize',
        debounce(this.handleWindowResize_.bind(this), 100)
      )
    );
    this.eventHandler_.add(
      dom.on(this.inputElement, 'keydown', this.handleKeyDown_.bind(this))
    );
    this.eventHandler_.add(
      this.getList().on('rendered', this.handleListRender_.bind(this))
    );
    if (this.visible) {
      this.align();
    }
  }

maxResults: 4,
			project,
			input: document.querySelector('input[name="query"]')
		});

		this.dropdowns_ = new Toggler({
			content: '.version-dropdown .dropdown-menu',
			header: '.version-dropdown .btn'
		});

		this.toggler_ = new Toggler({
			content: '.sidebar-toggler-content',
			header: '.sidebar-header'
		});

		this.docClickHandler_ = dom.on(document, 'click', this.handleDocClick_.bind(this));
	}

attached() {
    if (this.inputElement) {
      this.eventHandler_.add(
        dom.on(this.inputElement, 'input', this.handleUserInput_.bind(this))
      );
    }
  }

this.surfaces = {};

		/**
		 * When set to true, moves the scroll position after popstate, or to the
		 * top of the viewport for new navigation. If false, the browser will
		 * take care of scroll restoration.
		 * @type {!boolean}
		 * @default true
		 * @protected
		 */
		this.updateScrollPosition = true;

		this.appEventHandlers_ = new EventHandler();

		this.appEventHandlers_.add(
			on(globals.window, 'scroll', debounce(this.onScroll_.bind(this), 100)),
			on(globals.window, 'load', this.onLoad_.bind(this)),
			on(globals.window, 'popstate', this.onPopstate_.bind(this))
		);

		this.on('startNavigate', this.onStartNavigate_);
		this.on('beforeNavigate', this.onBeforeNavigate_);
		this.on('beforeNavigate', this.onBeforeNavigateDefault_, true);
		this.on('beforeUnload', this.onBeforeUnloadDefault_);

		this.setLinkSelector(this.linkSelector);
		this.setFormSelector(this.formSelector);

		this.maybeOverloadBeforeUnload_();
	}

this.setAriaAttributes_();
    this.eventHandler_.add(
      dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(document, 'click', this.handleDocClick_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(
        window,
        'resize',
        debounce(this.handleWindowResize_.bind(this), 100)
      )
    );
    this.eventHandler_.add(
      dom.on(this.inputElement, 'keydown', this.handleKeyDown_.bind(this))
    );
    this.eventHandler_.add(
      this.getList().on('rendered', this.handleListRender_.bind(this))
    );
    if (this.visible) {
      this.align();
    }
  }

/**
		 * When set to true, moves the scroll position after popstate, or to the
		 * top of the viewport for new navigation. If false, the browser will
		 * take care of scroll restoration.
		 * @type {!boolean}
		 * @default true
		 * @protected
		 */
		this.updateScrollPosition = true;

		this.appEventHandlers_ = new EventHandler();

		this.appEventHandlers_.add(
			on(globals.window, 'scroll', debounce(this.onScroll_.bind(this), 100)),
			on(globals.window, 'load', this.onLoad_.bind(this)),
			on(globals.window, 'popstate', this.onPopstate_.bind(this))
		);

		this.on('startNavigate', this.onStartNavigate_);
		this.on('beforeNavigate', this.onBeforeNavigate_);
		this.on('beforeNavigate', this.onBeforeNavigateDefault_, true);
		this.on('beforeUnload', this.onBeforeUnloadDefault_);

		this.setLinkSelector(this.linkSelector);
		this.setFormSelector(this.formSelector);

		this.maybeOverloadBeforeUnload_();
	}

attached() {
    super.attached();
    this.setAriaAttributes_();
    this.eventHandler_.add(
      dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(document, 'click', this.handleDocClick_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(
        window,
        'resize',
        debounce(this.handleWindowResize_.bind(this), 100)
      )
    );
    this.eventHandler_.add(
      dom.on(this.inputElement, 'keydown', this.handleKeyDown_.bind(this))
    );
    this.eventHandler_.add(
      this.getList().on('rendered', this.handleListRender_.bind(this))

attached() {
    super.attached();
    this.setAriaAttributes_();
    this.eventHandler_.add(
      dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(document, 'click', this.handleDocClick_.bind(this))
    );
    this.eventHandler_.add(
      dom.on(
        window,
        'resize',
        debounce(this.handleWindowResize_.bind(this), 100)
      )
    );
    this.eventHandler_.add(
      dom.on(this.inputElement, 'keydown', this.handleKeyDown_.bind(this))
    );
    this.eventHandler_.add(
      this.getList().on('rendered', this.handleListRender_.bind(this))
    );
    if (this.visible) {
      this.align();