[Javascript] How to get the clicked element?

[G1K777]

Hello,how can i get the clicked button with Javascript?

I know how to do it with ID.
 

document.getElementById('myElement').addEventListener('click', function(){

   //do something

}

But how can i do this when i have a website with multiple "Save" buttons that have a class of "save" ?
How do i get the right button? So only that one thing will save? For forms I'm using submit.

I'm not using Jquery, but with Jquery i simply do $('.save') and i get all the elements with a class "save". Does Jquery just loop .addEventListener() on all the elements or how does it work?

I have this so far:
(not rly far but... meh)

	function cl(e){
		document.querySelectorAll(e).forEach(function(x){
			debug(x);
		});
	}

It outputs all the elements into the console, should i do the same but with .addEventListener?

[0x21]

var elements = document.getElementsByClassName('class');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', (e) => {
    console.log(e.srcElement);
  });
}

Will log the clicked element to the console.

[G1K777]

I did this here:
 

function $(e,m,func){
		document.querySelectorAll(e).forEach(function(x){
			x.addEventListener(m,func);
		});
	}

Is yours faster?

[0x21]

18 minutes ago, G1K777 said:

Is yours faster?

I assume so, as getElementsByClassName is faster than querySelectorAll, but I haven't run tests specific to your use case.

[G1K777]

The function above adds a custom function to the addEventListener and i created another function:
 

function getValue(){
	console.log(this);
}

$('#nav_a a','click',getValue);

When i click on the link it outputs the anchor element, so far everything is okay.
My problem is when i try to get the attribute of "this" or "this.getValue", "this.value" everything results with undefined.

[0x21]

1 hour ago, G1K777 said:

My problem is when i try to get the attribute of "this" or "this.getValue", "this.value" everything results with undefined.

What do you expect this.value to return?

[G1K777]

26 minutes ago, mshaugh said:

What do you expect this.value to return?

Plan change, i found a easier way
But still have problems with it ughhh...
I created few pages in the "page" object. So the page object has multiple "test" pages.
 

content.loadPage(); //is a method that renders whe whole page from the page object.

content.loadPage(pages.article); //renders/opens the article. (works like a charm).

I want to load pages on hashchange, this isn't also a problem to get the hash:
 

loadPage(){
  let hash = location.hash.replace('#','');
  id('col_content').innerHTML = this.get(pages.article);
}

The issue is, when i get the hash, it's a string. So how to make something like:
"pages.hash". When i do this it's page.'myhash' as a string. How do i get the property ? WAIT!

I just remembered that there are two ways !
 

pages.article //Gets the article property from pages.
pages['article'] //Does the same and it uses a STRING! :D

Sometimes I'm just mad at myself, it took me 1-2h to realize that, i've tested each possible position of that function OMG, variables, even set a global variable to make it work! after 2h. Feels better than eating icecream and not getting fat.