Correctly developing a web resource, conveniently placing elements on a page, using the work of a professional designer, the knowledge of an experienced project coordinator and rich experience in Internet programming - all this is very important. Revitalizing the site, using a reasonable technology for presenting information, a dynamic system of events and a comfortable dialogue is several orders of magnitude more important.
The main event is the arrival of the visitor. If the visitor was late on the site, got the desired result and brought a dozen colleagues, friends or casual acquaintances - the site works well, “is responsible for its words” and performs the necessary actions.
Spectrum and meaning of events
HTML events are a well-organized concept. Page elements can generate events. The developer has a mechanism for distributing events by nesting elements.
There are not many major events, but there are many options for their application and combination. Real tasks require the formation of unique event processing algorithms.
This table highlights the most important events. In a particular application, completely different ones may be relevant, for example, from the browser: onafterprint, onbeforeonload, onmessage, etc. For the form, oncontextmenu, onforminput and oninvalid are provided. There are many events, but to revitalize the site, those highlighted in the table are quite enough.
Not all events should be used. For example, you can spend your personal time and see for yourself that the onclick HTML event is enough: using ondblclick is not practical. Ondblclick looks especially weird on smartphones and tablets. As always, simplicity is the key to success. In presenting information and handling events, this rule is of utmost importance.
The logic of the site and its events
The main thing for the site is the logic of work. The use of any popular content management system (CMS) limits the developer, but speeds up the development process. You can create your own unique dialogue with the visitor only on the site of "manual work", i.e. made from scratch when you create your own website concept based on your own fundamental developments, and not on third-party templates, patterns, frameworks and libraries:
- the task is always unique and real;
- design and presentation of information - a unique style;
- the decision process (dialogue) is a dynamic “reasonable” process of communication.
Any, even the best CMS always imposes its own style of work on the developer and site owner. This is not about an adaptive dialogue with a specific visitor (the dialogue itself adapts to the visitor), but about using the site as is customary in a specific area of tasks in the "understanding" of a particular CMS.
For example, the sites of online stores are all on one face when they are made on any of the popular CMS, and none of them can help make an informed choice of either a refrigerator or a washing machine, and even more so a computer. Search engines never give "reasonable" results. In both cases, in order to get what you want, the visitor must think for himself and make decisions himself.
Simple Form: Event Handling Example
It’s enough to use the listed HTML events to revitalize the site. In this example, the usual form of user login to the site is given. It uses the HTML select element and events on the div elements to enter and reject it.
Typically, the login form does not use a selector from the list of topics, but in some cases it is convenient to use the classification of users by categories and access rights. For example, this may make sense when the visitor’s qualification level is formed by a rating on the site, which gives the visitor more rights and opportunities.
Features of the elements
Events can be assigned to almost any element, and if there is no such possibility, then you can simply control the movement of the mouse on the screen. And work out the necessary events.
For example, on the screen - a map of the city. The visitor shuffles the pointer, and in a separate window, information immediately appears on which street, which house number, which object and their characteristics.
It should be noted that some elements are better off not equipped with event handlers. In particular, in the above example, hanging the handler on select is not correct. Although, if this is done consciously, the programmer should have an idea of what he is doing.
Similarly, you can say about the events of the HTML form button . The form itself causes the event to be processed. Complementing this standard processing with another handler is not promising.
Hanging processing on the “a” tag is also not very interesting. The link itself forms a transition and causes the event to be processed; an additional handler can create uncertainty or unexpected behavior.
Entering Information
The most popular application of events on the elements of forms. HTML input tag - events that allow you to control visitor behavior on the fly. Each data entry field can track an event: “onblur” - loss of focus - and take action to recalculate the data in its entire form, send information to the server or validate and return the focus “to the place” for correct input.
Getting focus onfocus is also an interesting event: you can offer the visitor a default value or calculate the value of the field that received the focus based on the contents of other fields.
Assigning Handlers
JavaScript allows the developer to assign event handlers in dynamics. As a general rule, as shown in the above example, an event handler, a function in JavaScript, can be specified in the HTML element.
Through the AJAX mechanism, you can redirect event processing to the server. In fact, the developer can control the behavior of the visitor in the process of the latter, loading the necessary information as necessary.
Mouse movements or keyboard events can lead to sending requests to the server and changing page elements. The tree of elements of the DOM page is neither a dogma nor a construct formed upon initial loading of the HTML page. Any HTML tag event handler can cause the tags themselves to change. This is an absolutely normal operation.
In this example, handlers are assigned during the execution of a script, and when they disappear, they are deleted.
JavaScript allows you to create not only event handlers, but also DOM elements. In this case, there is only one problem: the developer must represent the work of the site in dynamics. This is quite complicated. Ideally, a good HTML page is one single tag, for example, “Hello”, although in practice this hello can be equipped with the semantics of a web resource, subject area or task.
The visitor came - and the site decided on the content
As soon as the visitor came to the site, the latter begins to form under it. This is an ideal option. A simple example: a search engine. If a visitor has already been here and can be unambiguously identified, then an excellent solution would be to immediately give out not the standard page of the site, but that version of it in which the visitor completed the previous session.
HTML events and the ability to work with cookies give the developer the opportunity to remember the visitor and always match what he may wish to do. In addition to memory, events make it possible to organize a “rollback”: canceling operations is an important addition to any resource.
The HTML standard is memory free, but it can be easily emulated through events and the AJAX engine.
Work logic priority
Making a beautiful and modern website is not a problem. When using popular CMS - this is generally a matter of 15-20 minutes. However, there is a difference between a website made instantly and a web resource that took a month, three, or even a year of work.
The customer always wants everything at once, but all at once - this is only information and design. This is not enough to dynamically attract the attention of customer customers. The logic of the site is to take into account the interests of the visitor, HTML events focused not on serving page tags, but on defining the interests and wishes of the client.
Knowing the client’s face and guessing his thoughts is a good strategy for a quality web resource.