I have a nested html structure that needs to change in a certain way when clicked. For that, i need the element that the event is bound to, not the element that is clicked
For example....
theDesiredElement.addEventListener('click', function() { ... i need 'theDesiredElement' here } , false); Getting event.target get's the clicked element, not the element that the event is bound to. Is there a way to do that?
theDesiredElement.addEventListener('click', function(event) { ... i need 'theDesiredElement' here theDesiredElement=event.target; } , false); Based on what you are looking, you may have to get the parent node of target;
The function that you pass in, as the bound function for processing the click event, should take the event triggered as a parameter to it, allowing you to get details like the target of the event.
E.g.
var el = document.getElementById("theDesiredElement"); el.addEventListener('click', function(/*DOMEvent*/ evt) { ... }, false); Hanging off of evt you should be able to find the element that was clicked--e.g. theDesiredElement, accessing it with:
var desired = evt.target; See the following jsfiddle: http://jsfiddle.net/BbZgW/
For more details about addEventListener, take a look at EventTarget.addEventListener on MDN.
The answer is using this inside the function bound to the event. It points to the desired element.
theDesiredElement inside of it.
thisorevent.targetwill be the element that the event occurred in and the event handler is attached to.thisjsfiddle.net/zLLyS