Events in JavaScript

The JS Way to Use the GlobalEventHandlers Object

While Global Event Handlers are technically a Web API, accessing these events is crucial to JavaScript's functionality. These events mark points of interaction from the user or programmatic changes to the document, which can be harnessed to enable JavaScript code to provide both functional and visual manipulations, creating a modern web experience. For more information on the entire Web API, see GlobalWebHandlers Web API.

onload


<script>
                                                    window.onload = function() {
                                                        const elm = document.getElementById('onload-sample');
                                                        elm.style.width = "100%";
                                                        elm.style.background = url("https://source.unsplash.com/random/")
                                                    }           
                        </script>
                        
                        <div id="onload-sample" style="width:10px; height: 10px; background-image: linear-gradient(to right,#FDCA40, #2176FF ); transition: all 20s ease; overflow: hidden">ONLOAD sample</div>

ONLOAD sample

onmouseover & onmouseout

<marquee onmouseover="stop()" onmouseout="start()">This is MARQUEE text in HTML</marquee>

This is MARQUEE text in HTML

<script>
                        function sampleMsOverHandler(elm) {
                            elm.style.backgroundColor = "green";
                        }
                        
                        function sampleMsOutHandler(elm) {
                            elm.style.backgroundColor = "blue"; 
                        }
                        </script>
                        
                        <div onmouseover="sampleMsOverHandler(this)" onmouseout="sampleMsOutHandler(this)" style="color: white; background-color: darkblue; text-align: center; padding:1em;" >Mouseover and Mouse Out Functions Sample</div>

Mouseover and Mouse Out Functions Sample

onfoucus & onblur

<script> function sampleOnfocusHandler(elm) {
                            elm.style.backgroundImage = "url(https://source.unsplash.com/random/800x100)";
                        }
                        function sampleOnblurHandler(elm) {
                            elm.style.backgroundImage = "linear-gradient(to right bottom, green, orangered)"; 
                        }
                        </script≶
                        <button onfocus="sampleOnfocusHandler(this)" onblur="sampleOnblurHandler(this)" style="color: white; background-color: green; text-align: center; padding:1em;" >ONFOCUS and ONBLUR Sample</button>

↑Click in and outside of this box↑

onkeypress, onkeydown & onkeyup

<script>
                        function sampleOnKeyPressHandler(elm) {
                            elm.style.backgroundImage = "linear-gradient(to right, #E5E8B6,#E5E8B6)";
                        }
                        function sampleOnKeyDownHandler(elm) {
                            elm.style.color = "green";
                            elm.style.letterSpacing = "0.5em"; 
                        }
                        function sampleOnKeyUpHandler(elm) {
                            elm.style.color = "blue"; 
                            elm.style.letterSpacing = "0"; 
                        }
                        </script>
                        
                        <input type='text' onkeypress="sampleOnKeyPressHandler(this)" onkeydown="sampleOnKeyDownHandler(this)"  onkeyup="sampleOnKeyUpHandler(this)" style=" color: #7D869C; background-image: linear-gradient(to right bottom, #E5E8B6,#586994 ); text-align: center; padding:1em;" >ONKEYPRESS, ONKEYDOWN and ONKEYUP sample</input>

←Type here
ONKEYPRESS, ONKEYDOWN and ONKEYUP sample

onsubmit

<script>
                        function onSubmitSample() {
                            prompt('Submit Form?');
                        }           
                        </script>
                        
                        <form onsubmit="onSubmitSample()" >
                            <input type="submit"  />
                        </form>