Advertisement
Google Ad Slot: content-top
JS Basic Events
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:
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>
<script>
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>
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>
<script>
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>
Change Event:
The change event trigger when HTML element is changed type input and click outside input
Example
<div>
<p>EventListener</p>
<input id="inputChange" type="text" />
</div>
<div>
<p>HTML onChange function</p>
<input type="text" onchange="myFunction()" />
</div>
<div>
<p>JS onChange function</p>
<input id="inputChangeTwo" type="text"/>
</div>
<script>
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>
Keydown Event:
Th keydown event trigger when user press input keys.
Example
<div>
<p>EventListener</p>
<input id="inputKeydown" type="text" />
</div>
<div>
<p>HTML onKeydown function</p>
<input type="text" onkeydown="myFunction()" />
</div>
<div>
<p>JS onKeydown function</p>
<input id="inputKeydownTwo" type="text" />
</div>
<script>
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>