Difference between revisions of "Event Delegation"
Jump to navigation
Jump to search
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
'''Event Bubbling ''' </ | '''Event Bubbling ''' <br /> | ||
When a child element is clicked, the event bubbles all the way up the dom. This means that you can capture the child element that was activated through the bubbling up effect from the parent. </ | When a child element is clicked, the event bubbles all the way up the dom. This means that you can capture the child element that was activated through the bubbling up effect from the parent. <br /> | ||
You can capture the event by passing the even to the function and capturing the target | You can capture the event by passing the even to the function and capturing the target | ||
var myfun = function(event){ | var myfun = function(event){ | ||
console.log(event.target) | console.log(event.target) | ||
} | } // the 'event' text could be anything 'e' etc.. | ||
To traverse the DOM one parent up you you use | |||
event.target.parentNode | |||
To go up several parent up: | |||
event.target.parentNode.parentNode.parentNode /// etc.. | |||
To target a specific id: | |||
event.target.parentNode.parentNode.id | |||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]== | |||
Latest revision as of 20:09, 26 November 2016
Event Bubbling
When a child element is clicked, the event bubbles all the way up the dom. This means that you can capture the child element that was activated through the bubbling up effect from the parent.
You can capture the event by passing the even to the function and capturing the target
var myfun = function(event){
console.log(event.target)
} // the 'event' text could be anything 'e' etc..
To traverse the DOM one parent up you you use
event.target.parentNode
To go up several parent up:
event.target.parentNode.parentNode.parentNode /// etc..
To target a specific id:
event.target.parentNode.parentNode.id