× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

onClick priority over addEventListener in javascript?

Utkarsh Upadhyay
May 06, 2015
<p><code>addEventListner</code>'s third argument is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" rel="nofollow"><code>useCapture</code> flag</a>. If you set it to <code>true</code>, handler will be executed while the event is traveling <strong>down</strong> to the <code>button</code> element. However, if you set it to <code>false</code>, the handler will be triggered while the event is bubbling up:</p> <pre><code> capture phase | | / \ bubbling up -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------ </code></pre> <p>From: <a href="http://www.quirksmode.org/js/events_order.html#link4" rel="nofollow">http://www.quirksmode.org/js/events_order.html#link4</a></p> <p>In your example, the <code>onclick</code> <strong>should be executed <em>before</em> the click handler on the <code>body</code> tag</strong>. If you want to reverse the order of execution, you should <code>capture</code> the event at <code>body</code>.</p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29922682/onClick%20priority%20over%20addEventListener%20in%20javascript?/29923421">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus