Monitor all Events on an Element

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I've recently started researching autofill and what hints that browsers give to developers that they have automatically filled in a form field on the users behalf. Blink and WebKit browsers have a special CSS pseudo class that you can look at (more in another post), but firefox doesn't. There must be some event!!!</p> <p>Chrome DevTools has a handy helper function called <code>monitorEvents</code>, you call it with an element as an argument and it will then log to the console all the events that happen on that element. Meggin Kearny on our team and Flavio Cotes wrote about <a href="https://developers.google.com/web/tools/chrome-devtools/console/events">monitorEvents</a> and all the other helper functions recently on our <a href="https://developers.google.com/web">WebFundamentals</a> site.</p> <p>Firefox DevTools don't have this utility function, so I wrote my own.</p> <p>There are no guarantees for accuracy, but it worked for me ;)</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">monitorEvents</span>(<span style="color:#a6e22e">element</span>) { <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">log</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>) { <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">e</span>);}; <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">events</span> <span style="color:#f92672">=</span> []; <span style="color:#66d9ef">for</span>(<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">element</span>) { <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">i</span>.<span style="color:#a6e22e">startsWith</span>(<span style="color:#e6db74">"on"</span>)) <span style="color:#a6e22e">events</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">i</span>.<span style="color:#a6e22e">substr</span>(<span style="color:#ae81ff">2</span>)); } <span style="color:#a6e22e">events</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">eventName</span>) { <span style="color:#a6e22e">element</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#a6e22e">eventName</span>, <span style="color:#a6e22e">log</span>); }); } </code></pre></div><p>If you are a person who likes gists, <a href="https://gist.github.com/PaulKinlan/45de2fb55c1390d871b3a67f72ae730c">then here you go</a>.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan