How do I determine what element received an event?

Question

I just finished a pretty intense debugging session where my cucumber test code would work using webkit but wouldn't work using selenium. The problem was solved by being very specific about the exact DOM element that was clicked. I needed to specify clicking a deeply nested <span> element. This brought up a question for which I'm not sure how to answer:

How do I know what element, initially, received an event?

I've read a bit about event bubbling, so even if my element's event handler fires, it doesn't mean that it was the initial element to receive the event. I don't understand why Chrome was able to accept a click event that was propagated down to the correct element that fired off my handler, but Firefox didn't propagate the event down.

This question on debugging events doesn't quite capture my question, because in this case I didn't know what element to examine. I basically guessed correctly. I'd love a more methodical process to use to debug. Bonus points for helping me understand better the JS event bubbling/propagation model.

Answer 1

It's target property of the event object.

domElement.addEventListener('click', function(e){ 
    console.log(e.target); 
});