JavaScript 101-#19 – Attending to know JavaScript occasions Pt3




Within the previous part we took a take a look at occasions associated to kinds and tried alternative ways to make use of them in tasks. Regardless that you might need some enjoyable by firing alert messages and pop-up home windows (don’t really feel unhealthy for that), it’s time to transfer from kind to a different “group” occasions. I’m fairly positive that you’ll get pleasure from these occasions as effectively. What are we going to concentrate on at this time? The group of the day is window object occasions. For novices and pranksters, window object stands for physique tag. Let’s dive in …

As stated above, each occasion certain to window object can be fired at any time when some interplay between consumer and physique component of the web site will occur. What sort of occasion will rely on the title of occasion under you utilize.

onload

The primary occasion to look at is onload. Some folks may be confused by its title and ask what precisely does that imply. Does it fires up when web page is loading or proper after the web page is loaded? Fast reply. onload occasion happens after the web page is loaded. So, if you happen to bind this occasion to physique component, code for that occasion can be executed after the physique and its content material is totally loaded. This truth is essential. Think about you’ve got a component with heading, snippet of textual content in paragraph and a button to indicate entire textual content.

  • observe: I’m unsure if I discussed this earlier than, however “binding” is utilized in occasions, strategies and different subjects to explain “connecting” to parts (dot notation). So, binding onload to physique means physique.onload

HTML:

<article>
  <h1>Heading of article</h1>
  <p>Brief snippet of textual content</p>
  <button kind=”button” worth=”Extra” position=”button”>Extra</button>
</article>

For the reason that onload occasion is fired up after loading the web page (i.e. content material), you possibly can bind it to, for instance, the button and disable it for no matter purpose.

JS:

// choosing the physique component and binding the occasion to it
doc.getElementsByTagName('physique')[0].onload = perform() {
 // choice button and disabling it
 doc.getElementsByTagName('button')[0].disabled = true;
};

-note: As a result of getElementsByTagName() methodology will return and array of parts with their properties, we’ve got to make use of the index in brackets to pick out the component we would like. In any other case, code wouldn’t work.

In case onload occasion can be fired earlier than the window is loaded, JavaScript wouldn’t work in any respect. Why? How do you need to disable button that doesn’t even exist but?

onunload

As an reverse to earlier occasion we are able to additionally use onunload occasion. This occasion is fired each time the window (i.e. web page) is closed, effectively proper earlier than it’s closed. This additionally applies to refreshing or reloading the web page. Are you aware that suspicious web sites exhibiting pop-up messages once you attempt to shut them? This may be instance of onunload in motion. Nonetheless, there’s a “good” information within the type of browser assist. It appears to be like like solely IE (bizarre proper?) and Safari assist this occasion. Wanna instance? How about an alert message on closing the web page?

JS:

doc.getElementsByTagName('physique')[0].onunload = perform() {
 alert(“See ya subsequent time.”);
};

Earlier two occasions had been the one occasions associated to window present earlier than HTML5. Since now, each subsequent occasion can be a “youngster” of HTML5.

onbeforeunload

One other occasion you need to use to forestall the consumer from closing the web page is onbeforeunload (Who creates these names?). This occasion additionally fires simply earlier than the web page is loaded or refreshed (reloaded) and it shows a message set as default. This message is identical as confirm() window and gives two buttons. Nonetheless, you possibly can simply override this habits and show your individual through the use of return command.

JS:

doc.getElementsByTagName('physique')[0].onbeforeunload = perform() {
 return “Do you actually need to go?”;
};

In contrast to onunload occasion there may be not an issue in browser assist besides some points which may seem in Opera older than model 15. However who’s utilizing it anyway?

onafterprint & onbeforeprint

I don’t need to throttle you by large quantity of textual content (significantly) so let’s take two occasions at one time. These occasions are onafterprint and onbeforeprint. Don’t fear, we’re nonetheless on the web. Print merely means printing the web site, saving it as pdf or no matter do you want. As their names recommend, onbeforeprint is fired earlier than the web page goes to be printed and onafterprint after it’s printed. This may be even utilized in a great way to tell consumer what’s going to occur …

JS:

doc.getElementsByTagName('physique')[0].onbeforeprint = perform() {
 alert(“The web page you're viewing can be printed out.”);
};

doc.getElementsByTagName('physique')[0].onafterprint = perform() {
 alert(“Web page was printed out. You may safely proceed in looking now.”);
};

For each of those occasions apply solely partial assist throughout browsers. You should use them in Mozilla Firefox and – is {that a} joke? – IE.

ononline & onoffline

These two occasions are fired up when the web site you’re looking is both in on-line or offline mode. Due to their poor assist, the work solely in Mozilla Firefox and IE 8 – 10, you’ll most likely not use them as a lot in your work. Nonetheless, attention-grabbing option to make the most of these occasions will be to focus on these two particular browsers (Firefox and IE 8-10) so as to execute some JavaScript code.

JS:

doc.getElementsByTagName('physique')[0].ononline = perform() {
 immediate(“Do you want Firefox or previous IE?”);
};

onpageshow & onpagehide

Keep in mind after we talked about onload and onunload occasions? Nicely, these are comparable. The one distinction right here is the order during which they’re fired. onpageshow is fired after the onload. So, if you happen to use each of them, code for onload can be executed as first and code for onpageshow as second.

JS:

doc.getElementsByTagName('physique')[0].onload = perform() {
 alert(“Web page is loaded and prepared!”);
};

doc.getElementsByTagName('physique')[0].onpageshow = perform() {
 alert(“Sure we all know, the web page is was loaded.”);
};

onmesage & onerror

The onmessage occasion is fired in state of affairs when postMessage() methodology is used to ship some message. onerror occasion is fired any time when some error will happen in your script recordsdata or code on the web page. This occasion will be very helpful for debugging or refactoring your code.

onpopstate & onstorage

Each time you alter the historical past of the window, the onpopstate occasion is fired. It is very important point out that this occasion is not going to hearth in case of utilizing pushState() or replaceState() strategies on historical past object of the browser. Solely consumer interplay with the browser (navigating by means of historical past by way of buttons) can set off it. onstorage is said to Web Storage (localStorage) and it’s fired each time the Web Storage is up to date (some key or worth is modified). WebStorage is used to retailer sure info in key & worth pair (like JavaScript object or JSON) in consumer’s browser.

onresize & onhashchange

The final two occasions we’re going to discover are onresize and onhashchange. The second occasion, onhashchange, is triggered when URL of the web site is modified. This is applicable solely to the half beginning with hashtag “#”. The onresize occasion is fired (or triggered) any time you resize the window. You should use this occasion for instance to show a pop-up message exhibiting what the decision is.

JS:

window.onresize = perform() {
 alert(“Width of the browser is ” + window.innerWidth + “px and top is ” + window.innerHeight + “px”);
};

Abstract

And that is all in the case of occasions associated to window object. Within the subsequent half we’ll proceed by exploring group associated to mouse. Till then, apply.

For those who favored this text, please subscribe so you do not miss any future publish.








If you would like to assist me and this weblog, you possibly can turn into a patron, or you should buy me a espresso 🙂







Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#JavaScript #JavaScript #occasions #Pt3