title: Are there ways to react upon a click without adding an event?
body: <p>I'm using this great Chrome extension <a href="https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim" rel="nofollow">Visual Event</a> which displays JS events attached to a website's elements visually.</p>
  
  <p>Using it, I noticed that there seem to be other ways to react upon a click using JavaScript that aren't events?</p>
  
  <p>For example, the following page has a dialog programmed in JavaScript, but Visual Event doesn't show any events:</p>
  
  <p><a href="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/accessible.html" rel="nofollow">https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/accessible.html</a></p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1814983/13948107/8e994d26-f01e-11e5-81c3-aded03754353.png" alt="image"></p>
  
  <p>When looking at the source code, I see it uses <code>.addEventListener</code> (a plain JS function?) instead of <code>.click</code> (a jQuery function?). I created a demo page with both variants:</p>
  
  <p><a href="http://codepen.io/jmuheim/pen/jqBodO" rel="nofollow">http://codepen.io/jmuheim/pen/jqBodO</a></p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1814983/13948117/9da63dd8-f01e-11e5-9618-e550f22daedc.png" alt="image"></p>
  
  <p>But this doesn't seem to be the only difference. Because when I use a screenreader like <a href="http://www.nvaccess.org/" rel="nofollow">NVDA</a>, it announces <code>clickable</code> for elements that react upon clicks - but it doesn't do this in any case, as it seems.</p>
  
  <p>In the first example (the modal window), NVDA doesn't say <code>clickable</code> at all:</p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1814983/13948211/2b1d7ca8-f01f-11e5-93b9-88895d81e87e.png" alt="image"></p>
  
  <p>In my example, NVDA announces <code>clickable</code> for both elements:</p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/1814983/13948263/64b792aa-f01f-11e5-8b92-eb574afc5c69.png" alt="image"></p>
  
  <p>So I'm really confused about the different ways to react upon a click in JavaScript, as there seem to be at least 3 different types:</p>
  
  <ul>
  <li>One using <code>.click</code>, which is always announced by NVDA as <code>clickable</code> and displayed by Visual Event</li>
  <li>One using <code>.addEventListener</code> being announced by NVDA (and not displayed by Visual Event)</li>
  <li>One using <code>.addEventListener</code> not being announced by NVDA (and not displayed by Visual Event)</li>
  </ul>
  
  <p>Can anybody tell me the differences here? Thank you.</p>