1const element = document.querySelector(".class__name");
2
3element.addEventListener("click", () => {
4 console.log("clicked element");
5});
1document.querySelector("button").addEventListener("click", handle);
2
3function handle() {
4 alert("I got clicked")
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;