1const element = document.querySelector(".class__name");
2
3element.addEventListener("click", () => {
4	console.log("clicked element");
5});

1element.addEventListener("click", function(){ 
2   element.innerText = "something"; 
3}); 

1document.querySelector('div').addEventListener('click', () => {
2  console.log('div clicked');
3});

1//DOM Level 2 Event Listener (Advanced technique to call an event)
2document.getElementById("btn2").addEventListener('click', () => {
3    alert("hello world");
4}, false);
5//our third param of DOM Level 2 Event Listener
6// false = event trigger from bottom to top(bubbling phase)
7// true = event trigger from top to bottom (capturing phase)
8
9
10//TRADITIONAL DOM EVENT HANDLERS (very old)
11function show_alert() {
12    alert("hello world");
13}
14document.getElementById("btn1").onclick = show_alert;

1addEventListener("click", function() {
2	document.body.style.backgroundColor="black";
3});