title: Add event listener on element focus
body: <p>I have a search box input that opens when an icon is clicked on. I would like to give the input focus when the icon is clicked and call the function addLabel() that adds a label as placeholder text until a “onkeydown” event is fired, at which time it should call the function removeLabel(). Currently, my script adds focus(), but doesn’t acknowledge the other event listeners. Any help would be appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
  
  &lt;!-- create absolutly positioned label as placeholder text for search --&gt;
          var el = document.getElementById('gsc-i-id1');
          var label = document.createElement('label');
          var labelText = document.createTextNode('Enter your search term...');
          label.appendChild(labelText);
          label.className += 'search-label-placeholder';
          var searchParent = el.parentNode;
          searchParent.insertBefore(label, el);
  
          var searchIcon = document.getElementById('search-icon');
          searchIcon.addEventListener('click', function(e) {
  
              el.addEventListener('focus', addLabel );
              el.addEventListener('keydown', removeLabel );
              el.focus();
          }, false );
  
             function removeLabel() {
  
              el.style.textIndent = '0';
              el.setAttribute('placeholder', 'removeLabel');
              el.style.background = 'none';
              el.style.textIndent = '0';
              label.style.display = 'none';
             };
             function addLabel() {
  
              el.style.textIndent = '0';
              el.setAttribute('placeholder', 'addLabel');
              el.style.background = 'none';
              el.style.textIndent = '0';
              label.style.display = 'block';
              };
          };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header-holder"&gt;
       &lt;!-- header logotype --&gt;
       &lt;strong class="header-logo"&gt;
                  &lt;a href="/"&gt;&lt;img alt="Rose-Hulman Institute of Technology" src="../../../assets/images/logo-header.svg"&gt;&lt;/a&gt;
              &lt;/strong&gt;
       &lt;!-- header actions --&gt;
       &lt;ul class="header-actions"&gt;
        &lt;li&gt;
         &lt;button class="header-actions-btn header-actions-btn-search" data-action="search" id="search-icon"&gt;
          &lt;span class="icon icon-search"&gt;&lt;span class="hide-for-screen-reader"&gt;Search&lt;/span&gt;&lt;/span&gt;
         &lt;/button&gt;
        &lt;/li&gt;
        &lt;li&gt;
         &lt;button class="header-actions-btn header-actions-btn-menu" data-action="menu"&gt;
          &lt;span class="icon icon-menu"&gt;&lt;span class="hide-for-screen-reader"&gt;Menu&lt;/span&gt;&lt;/span&gt;
         &lt;/button&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
       &lt;!-- header search form --&gt;
       &lt;div class="header-search"&gt;
        &lt;div id="___gcse_0"&gt;
         &lt;div class="gsc-control-searchbox-only gsc-control-searchbox-only-en" dir="ltr"&gt;
          &lt;form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8"&gt;
           &lt;table cellspacing="0" cellpadding="0" class="gsc-search-box"&gt;
            &lt;tbody&gt;
             &lt;tr&gt;
              &lt;td class="gsc-input"&gt;
               &lt;div class="gsc-input-box" id="gsc-iw-id1"&gt;
                &lt;table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;"&gt;
                 &lt;tbody&gt;
                  &lt;tr&gt;
                   &lt;td id="gs_tti50" class="gsib_a"&gt;
                    &lt;label class="search-label-placeholder" style="display: none;"&gt;Enter your search term...&lt;/label&gt;
                    &lt;input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="en" dir="ltr" spellcheck="false" placeholder="removeLabel" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background: none left center no-repeat rgb(255, 255, 255); text-indent: 0px;"&gt;
                   &lt;/td&gt;
                   &lt;td class="gsib_b"&gt;
                    &lt;div class="gsst_b" id="gs_st50" dir="ltr"&gt;&lt;a class="gsst_a" href="javascript:void(0)" style="display: none;"&gt;&lt;span class="gscb_a" id="gs_cb50"&gt;×&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                   &lt;/td&gt;
                  &lt;/tr&gt;
                 &lt;/tbody&gt;
                &lt;/table&gt;
               &lt;/div&gt;
               &lt;input type="hidden" name="bgresponse" id="bgresponse"&gt;
              &lt;/td&gt;
              &lt;td class="gsc-search-button"&gt;
               &lt;input type="image" src="https://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search"&gt;
              &lt;/td&gt;
              &lt;td class="gsc-clear-button"&gt;
               &lt;div class="gsc-clear-button" title="clear results"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/td&gt;
             &lt;/tr&gt;
            &lt;/tbody&gt;
           &lt;/table&gt;
           &lt;table cellspacing="0" cellpadding="0" class="gsc-branding"&gt;
            &lt;tbody&gt;
             &lt;tr&gt;
              &lt;td class="gsc-branding-user-defined"&gt;&lt;/td&gt;
              &lt;td class="gsc-branding-text"&gt;
               &lt;div class="gsc-branding-text"&gt;powered by&lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="gsc-branding-img"&gt;&lt;img src="https://www.google.com/cse/static/images/1x/googlelogo_grey_46x15dp.png" class="gsc-branding-img" srcset="https://www.google.com/cse/static/images/2x/googlelogo_grey_46x15dp.png 2x"&gt;&lt;/td&gt;
             &lt;/tr&gt;
            &lt;/tbody&gt;
           &lt;/table&gt;
          &lt;/form&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>