Attaching Multiple JavaScript onFocus Values
JavaScript OnFocus Event
JavaScript offers a myriad of events to which a developer may attach different listeners to be executed, many of which are directly related to user input, such as the onFocus event. Attaching onFocus listeners is a simple way to check for a value or another validation of some sort, for this event is triggered whenever a given element receives browser focus. In other words, the actions (or listeners) applied to a text input field’s onFocus will be called when a user clicks, tabs, or in some other way transfers the browser focus to that element. Attaching a single action as the value of an onFocus attribute is incredibly useful, but there are times where attaching multiple onFocus values in JavaScript can be extremely useful as well. The most basic way to attach an onFocus listener is directly in the onfocus attribute and can be seen in this example.
Multiple onFocus Values
There are two major ways to assign a value to the onFocus event of an element, and each of them has ways of attaching multiple actions to a single event. First of all, we can define the action(s) inline directly in the markup. This can be a quick and dirty fix for those who simply need to add some needed functionality to existing code, though this is definitely not the best decision architecturally. To add multiple onFocus values (or listeners), you simply need to separate them with a semicolon (see this example). Consider the value of the onfocus attribute in your markup to be a string of JavaScript that will be executed. With that in mind, you can add some fairly complex functionality, including multiple method calls, all directly within the markup. While this can be useful, it is much better practice to add the listeners programatically rather than inline.
Adding onFocus Listeners Programatically
In order to build a structurally sound application, we want to extract the JavaScript code from being inline within the markup. Then, we can reference the elements to which we wish to attach our listeners by ID or another means and attach them dynamically. Without the dependence upon inline inclusion, we are able to write a wrapper function that will accept both a DOM element and a function as parameters, and it will in turn attach the provided function as a listener on the provided element. In creating a wrapper function, we can check for existing listeners and continue to add to the onFocus values rather than replacing them completely. This example creates the helper function to attach the listeners as well as gives the example code to implement it. By checking for the existence of existing onFocus values, we can easily stack them and add more values from anywhere in our code. This means is much more solid, because the same helper function can be used to attach an onFocus listener to any DOM element.
