JavaScript Basic Events: A Complete Guide

Events in JavaScript are actions or occurrences that happen in the browser, such as clicking a button, hovering over an element, typing in a text field, resizing a window, or submitting a form.

Click Event
Mouseover and Mouseout Event
Change Event
Keydown Event

Click Event:

The click event is triggered when a user clicks on an HTML element, such as a button, link, or any clickable element.

Example

<button id="myButton">Click Me 1</button>

<button onclick="myFunction()">Click Me 2</button>

<button id="buttonTwo">Click Me 3</button>

const button = document.getElementById('myButton');

// Using addEventListener

button.addEventListener('click', () => {

alert('Button clicked one');

});

const myFunction = () =>{

alert('Button clicked two');

}

const buttonTwo = document.getElementById('buttonTwo');

buttonTwo.onclick = function() {

alert('Button clicked three');

};

</script>

Try it yourself

Mouseover and Mouseout Event:

The Mouseover event trigger when pointer is over on element
Then Mouseout event trigger when pointer is leave on element

Example

<div>

<p>EventListener</p>

<h2 id="mouseEventOne">Mouse over 1</h2>

</div>

<div>

<p>HTML onChange function</p>

<h2 id="mouseEventTwo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over 2</h2>

</div>

<div>

<p>JS onChange function</p>

<h2 id="mouseEventThree">Mouse over 3</h2>

</div>

const mouseEventOne = document.getElementById('mouseEventOne');

// Using addEventListener

mouseEventOne.addEventListener('mouseover', () => {

document.getElementById("mouseEventOne").style.color = "red";

});

mouseEventOne.addEventListener('mouseout', () => {

document.getElementById("mouseEventOne").style.color = "black";

});

const mouseOver = () =>{

document.getElementById("mouseEventTwo").style.color = "blue";

}

const mouseOut = () =>{

document.getElementById("mouseEventTwo").style.color = "black";

}

const mouseEventThree = document.getElementById('mouseEventThree');

mouseEventThree.onmouseover = function() {

document.getElementById("mouseEventThree").style.color = "green";

};

mouseEventThree.onmouseout = function() {

document.getElementById("mouseEventThree").style.color = "black";

};

</script>

Try it yourself

Change Event:

The change event trigger when HTML element is changed type input and click outside input

Example

<div>

<p>EventListener</p>

</div>

<div>

<p>HTML onChange function</p>

</div>

<div>

<p>JS onChange function</p>

</div>

const inputChange = document.getElementById('inputChange');

// Using addEventListener

inputChange.addEventListener('change', (event) => {

console.log(event.currentTarget.value)

});

const myFunction = () =>{

console.log(event.currentTarget.value)

}

const inputChangeTwo = document.getElementById('inputChangeTwo');

inputChangeTwo.onchange = function() {

console.log(event.currentTarget.value)

};

</script>

Try it yourself

Keydown Event:

Th keydown event trigger when user press input keys.

Example

<div>

<p>EventListener</p>

</div>

<div>

<p>HTML onKeydown function</p>

</div>

<div>

<p>JS onKeydown function</p>

</div>

const inputKeydown = document.getElementById('inputKeydown');

// Using addEventListener

inputKeydown.addEventListener('keydown', (event) => {

console.log(event.currentTarget.value)

});

const myFunction = () =>{

console.log(event.currentTarget.value)

}

const inputKeydownTwo = document.getElementById('inputKeydownTwo');

inputKeydownTwo.onkeydown = function() {

console.log(event.currentTarget.value)

};

</script>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.