DOM events in JavaScript

Registering Event Handlers:

 event.addEventListner(‘click’ , callback , true)

The event handler can also be registered as an HTML element but it is recommended to avoid inline JavaScript.

Example of named event handler function

Passing Event as a Parameter

button.addEventListener('click', (e)=>{
console.log(e.target.id)
})

What’s the difference?

const button = document.querySelector(".btn");
button.addEventListener("click", event => {
console.log("Hello!");
});
button.addEventListener("click", event => {
console.log("How are you?");
})
// This wil log
// "Hello!"
// "How are you?"
// to the console

So what happens when we use “addEventListener”?

   const button = document.querySelector(".btn");   button.addEventListener("click", event => {
console.log("Hello!");
})
button.addEventListener("click", event => {
console.log("How are you?");
})
// This wil log
// "Hello!"
// "How are you?"
// to the console

Event Bubbling

event.addEventListner('click' , callback , true)

Stop Propagation

Get a <li> elements index value on click with jQuery

$(document).ready(function(){
$(“ul”).find(“span”).css({“color”:“red”, “border”:“2px solid red”});
});

how to detect which button is clicked using jQuery

$("input").click(function(e){
var idClicked = e.target.id;
});

Set image src to another image jquery

$('#img-wrapper img').attr("src",loc);

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store