Why Elvis ?

Called it evlis for EVentLIStener originally, but when I saw it, I couldn't resist the vl->lv swap...

An example that didn't work on my Android Chrome (2015) Phone (2016). It didn't work on my Firefox (2016) either. It uncovered something that should be aware of : very new JS-tricks don't work everywhere!

FAQ

Why is everything in boxes here?
⋄ So you know what you click and can check that with the alerts
⋄ To show that what doced generates not always is perfect (!)

Where are the columns?
⋄ They interfere with coding examples
⋄ , have to fix that in doced / css (overflow) probably

Original Version from javascript.info

for ( let elem of document.querySelectorAll('*') ) { 
	elem.addEventListener ( 'click' , e => alert ( `Capturing \${elem.tagName}` ) , true ) ; 
	elem.addEventListener ( 'click' , e => alert ( `Bubbling \${elem.tagName}` ) ) ; 
}

According to JS.I this should give each element name, but it always reports SCRIPT
⋄ in head or body makes no diff
⋄ with or without type no diff
⋄ name of loopvar makes no diff
⋄ using this -> undefined

Using separate function DOES DIFF !
⋄ it looks like the arrow function uses the variable's TAG Name

Assumption : arrow function too new for FF2016 / AC2015
⋄ regular 'inflight' function confirms, and allows 'this'

Final Version

for ( let elem of document.querySelectorAll('*') ) { 
//	elem.addEventListener ( 'click' , e => alert ( `Capturing \${elem.tagName}` ) , true ) ; 
	elem.addEventListener ( 'click' , function(e) { alert ( `*Capturing \${this.tagName}` ) } , true ) ; 
//	elem.addEventListener ( 'click' , alCap , true ) ; 
//	elem.addEventListener ( 'click' , e => alert ( `Bubbling \${elem.tagName}` ) ) ; 
	elem.addEventListener ( 'click' , alBub ) ; 
}
function alCap (e) { alert ( `Capturing: \${this.tagName}` ) ; } 
function alBub (e) { alert ( `Bubbling: \${this.tagName}` ) ; }