While Global Event Handlers are actually a Web API, accessing these events are central to Javascript's usefulness. These events mark points of interaction from the user or programmatic changes to the document. All of this can be harnessed via JavaScript to provide both functional and visual manipulations that create a modern and immersive web experience. For detail on the whole Web API see GlobalWebHandlers Web API.
The load event triggers when the an item has finished loading. This could be an <img>, window, XMLHttpRequest and more. As the marquee text moves, hover over it to see it stop, then move away to see it start up again. Each time either a mouseover or mouseout events is triggered. The focus and blur events are produced when an element is selected or deselected, respectively ↑Click in and outside of this box↑ When a key is pressed, the process of pushing it down and then releasing it back up generates two events that can be harnessed. The trip down triggers the keydown event, the trip back up triggers a keyup event. Note: The keypress event, has been deprecated, but it was around for a while so it still may be encountered. This was triggered when the key was pressed down There are many more events that can be harnessed for a great deal of control over much of the web app processing. The detail above is just to outline the basic concept and provide a few good examples. Essentially, when an event is produced by the GlobalEventHandlers Web API, we can use JavaScript to grab the related detail and launch functions toward a variety of end goals. I did not cover onclick because it is so commonly used it seemed a waste of space to get into this here. There are many great click events we can grab, along with CSS transitions and animations, drag and drop events and so many more.JS Use the GlobalEventHandlers 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; background-image: linear-gradient(to right,#FDCA40, #2176FF ); transition: all 60s ease; overflow: hidden">Slow ONLOAD sample</div>
onmouseover & onmouseout
<marquee onmouseover="stop()" onmouseout="start()">This is MARQUEE text in HTML</marquee><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>
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: #2271b1; text-align: center; padding:1em;" >ONFOCUS and ONBLUR Sample</button>
onkeydown & onkeyup
<script>
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' onkeydown="sampleOnKeyDownHandler(this)" onkeyup="sampleOnKeyUpHandler(this)" style=" color: #7D869C; background-image: linear-gradient(to right bottom, yellow, green); text-align: center; padding:1em;" >ONKEYDOWN and ONKEYUP sample</input>
←Type here ONKEYDOWN and ONKEYUP sample
onsubmit
<script>
function onSubmitSample() {
alert('You are now submitting this form!');
}
</script>
<form onsubmit="onSubmitSample()" >
<input type="submit" />
</form>
There Are Many More!
ONLOAD Sample
Mouseover and Mouse Out Functions Sample
2 Replies to “Events in JavaScript”