Develop Reference

touch events not firing on anchor with no href

Consider the following:
<a class="addThing">link</a>
$(document).on('click','.addThing',function(){
alert('test');
});
On my iPhone I couldn't get a click event to fire on this anchor until I added href="javascript:" to the anchor. The anchor was added to the DOM after the page load. I'm able to recreate this by using JS to add an anchor to the DOM and confirmed it doesn't register the click, but if I added it on page load it does.
This suggests that the phone/browser/OS is somehow treating the elements differently if loaded to the DOM via javascript, but it's the same HTML.
I have a few questions:
Why does the href need to be there for the click event to fire.
Is there another method to get the event to register? (I was thinking something to do with tab index or something like that.)
Is this specific to OS/Device/Browser/Platform or is this something working as it should per W3C documentation?
Is javascript: the same as javascript:void(0). I came across the void(0) thing while researching this and I've always just done javascript:.
EDIT
Per http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
Answer to 1,2 & 3 apparently because the href in turn adds the CSS styling of cursor: pointer it makes it magically work. I don't have an android device to test.
Answer to #4 is apparently, it's 2016. Not sure what that means.

//use following css for a
a {cursor:pointer;}

Javascript DOM-event origin and dependencies

Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.

It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.

How to find out what event is firing on what element

Is there a tool (or something in firebug) that will tell me what events just fired and more importantly on what elements they were bound to?
I have a number of javascript "includes", some minified, some not. I am experiencing some odd behaviour that I want to turn off, but I cannot find what is causing it.
I have a form showing in a "popup" and when I try to click on one of the input boxes, the "popup" closes, so some event bind somewhere is causing this.
The problem is, I don't know what element has this spurious event bound to it. The problem also occurs if I click anywhere inside the popup (and on the background mask that is covering the rest of the page, but that's acceptable)
I am using firefox, so anything I can type in the console is also an option. The eventys in the multiple javascript files are done in various ways, some through jquery, some using inline attributes (eg. onclick="..."), some using just javascript.
I certainly don't want to go and add some line of code to every possible event in every javascript file.
I have spent over an hour trying to hunt down this dom element and have already eliminated the obvious ones like the divs containing the popup and the body tag.

DOM modifications can be tracked down using the Break On Mutate option within Firebug. It can be activated by clicking the related button ( ) within the HTML panel. Note that the Script panel has to be enabled for this to work.
There are also several other Break On ... features, which may help you finding the right position within the code for a specific event.
Furthermore Firebug 2.0 introduced an Events side panel, which displays all events bound to the element selected within the HTML panel. If libraries like jQuery are used, it will even allow you to investigate the user-defined function wrapped by the library function in case you enable the option Show Wrapped Listeners as described in the answer to a related question.

set breakpoint to html element?

for example I have button element, the click event is attached to id in XXX.js file (I don't know the file name) , and I have many .js files. I want to debug the button click but how can I figure out where to set breakpoint if i don't know where button click function is ? is there any way to set breakpoint on element ( I'm using firebug, if it's impossible on firebug and possible for any other add-on please tell)
I'm using EXT sencha to add eventhandlers

Events handled with addEventListener:
Using your browser's developer tools, you can often times inspect an element to see what events are bound to it, and from which source file. For instance, the following example shows a click event bound to my button element:
Events handled with jQuery's $.fn.on:
If you bound the handler using jQuery's $.fn.on method, you can look into its internal $._data collection to determine what events handled for which elements:

I would check out this plugin. That will help you find what file/where the bound event lives. Then you can debug from there. http://www.sprymedia.co.uk/article/Visual+Event+2

If you want to know the js file with the listener, use Chrome dev tool, Inspect Element > On the Event Listeners you will find attached listeners and the file and even highlight the code on clicking. I don't know if this feature is in firebug too

Chrome Development Tools provides an Event Listener, which shows you elements and the attached Js-Events. Not quite sure if it helps you with your specific problem.

Firebug implements the getEventListeners command that returns every event listeners for every events for a node:
http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/
Also there is the EventBug extension, that offers a UI:
https://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug

a href onclick event is not working if there a rel attribute defined on it

I have a onclick event for a href , but if a define a rel the function is not getting called
<a href="http://somewebsite"
onclick="javascript:someFunction('somevalue');"
name="top"
rel="somevalue">testing </a>
If I remove the rel property the onclick is working just fine.
What's up with that?

I'm not sure this is really an answer, but really more of a debugging diagnostic. Plus, it was getting a bit long for use in the comments section.
There are no JS errors for me in either Chrome 7 or FF 3.6.8
There are no apparent unclosed quotes in the anchor tag
While the rel tag is not directly supported by any modern browser (but rather used by search spiders), the consensus is that it shouldn't affect events. In fact, per some user comments, such #James Kovaks, it works fine in his tests.
From the Chrome JS console, the function trackForGA is visible, and executable without error.
Attaching an event with jQuery, and then clicking, fires the event as expected. This tells us the click event is in fact being fired by the browser.
code:
$('#countrytabs li:first').click(trackForGA); // click overview tab
Suggested next steps:
Try other event types, to see if they are affected as well - such as onmouseover.
Begin removing JavaScript that is not related to this particular event. Specifically, the only JS you want to remain is the trackForGa function and the onclick JS. Even remove externally loaded JS, such as jQuery (you can presumably do this on a local test/dev box)
If the problem persists, remove trackForGa and instead just do an alert() from the onclick event.
If the problem persists, run your site through an HTML validator (http://validator.w3.org/)
If the problem persists after fixing validation problems, begin removing unrelated HTML tags and content. Systematically remove items until the click is firing as expected to identify a potential culprit.

Also, you never need to specify "javascript:" in an onclick. The only thing that can follow is JavaScript.