Scribd
Upload
17 views5 pages

JS Events Part1

Events handlers

Uploaded by

Firoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views5 pages

JS Events Part1

Events handlers

Uploaded by

Firoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

JavaScript Events and Event Handlers (Part 1)

HTML Events

<button onclick="myFunction()">Click me</button>

<script>

function myFunction() {

alert("Button clicked!");

</script>

DOM Events

<script>

document.addEventListener("DOMContentLoaded", function() {

alert("DOM fully loaded and parsed");

});

</script>

DOM Event Listener

<button id="myBtn">Click Me!</button>

<script>

document.getElementById("myBtn").addEventListener("click", function() {

alert("Button was clicked");

});

</script>

onAbort
<video width="320" height="240" controls onabort="abortFunction()">

<source src="movie.mp4" type="video/mp4">

</video>

<script>

function abortFunction() {

alert("Video loading was aborted");

</script>

onBlur

<input type="text" id="name" onblur="blurFunction()">

<script>

function blurFunction() {

alert("Input field lost focus");

</script>

onChange

<input type="text" id="myInput" onchange="changeFunction()">

<script>

function changeFunction() {

alert("Value changed to: " + document.getElementById("myInput").value);

}
</script>

onClick

<button onclick="clickFunction()">Click me</button>

<script>

function clickFunction() {

alert("You clicked the button!");

</script>

onDblClick

<button ondblclick="dblClickFunction()">Double-click me</button>

<script>

function dblClickFunction() {

alert("You double-clicked the button!");

</script>

onError

<img src="invalid-image.jpg" onerror="errorFunction()" width="300" height="200">

<script>

function errorFunction() {

alert("Image failed to load");

}
</script>

onFocus

<input type="text" id="focusInput" onfocus="focusFunction()">

<script>

function focusFunction() {

alert("Input field is focused");

</script>

onKeyDown

<input type="text" id="keyInput" onkeydown="keyDownFunction()">

<script>

function keyDownFunction() {

alert("Key pressed down");

</script>

onKeyPress

<input type="text" id="keyPressInput" onkeypress="keyPressFunction()">

<script>

function keyPressFunction() {

alert("Key was pressed");

}
</script>

onKeyUp

<input type="text" id="keyUpInput" onkeyup="keyUpFunction()">

<script>

function keyUpFunction() {

alert("Key released");

</script>

You might also like