Browser Events
An event is a signal to specify an occurrence against which the users must create an action. The document object model nodes can generate such events. An example of an event is the interaction with a web page when a user clicks a button. The developers can create a reaction to that event by displaying a dialogue box. Following are some of the primary browser events a developer has to work with:
- Keyboard Events
- Mouse Events
- Document Events
- CSS Events
- Form Element Events
Therefore, the developers can work with various event handlers to make a web page react appropriately when an event occurs.
Browser Object Model (BOM)
Like the Document Object Model (DOM), the browser creates a Browser Object Model (BOM) when loading a web page. The BOM represents the hierarchy of browser objects which help modify the properties and methods of the browser itself. The window object is the default object of the browser. The users can access all the window functions by specifying them as “window” or calling them directly. For example, the following two lines of code execute the same output:
window.alert("Hello World!");
alert("Hello World!");
Types of Browser Objects
Following are some of the basic types of JavaScript browser objects to access and manipulate so the developers can get desired results:
- Window Object
- History Object
- Screen Object
- Navigator Object
- Location Object
- Popup Boxes
- Timing
- Cookies
Event Handlers
Event handles help create reactions regarding an event. The event handles help in executing JavaScript code every time a user interacts with the web page. The developers can assign a handler using various ways, such as using an HTML attribute, DOM property, and adding event listeners.
Handler Using HTML attribute
The developers can set the event handlers in HTML using the attribute “on<event>.” Below is an example of using an event handler with the click operation. When the user uses a mouse click, the code written inside that particular click triggers and executes a suitable response. Following is an example of using the “onClick” event handler:
<script>
function count() {
for(let i=1; i<=3; i++) {
alert("Number " + i);
}
}
</script>
<input type="button" onclick="count()" value="Count numbers!"></input>
The above example shows the working of an onClick event. This example uses a JavaScript function to write code and call it when a user clicks a button. Another example is to use an HTML attribute for creating an event handler. Following is an example of using the attribute:
<input value="Click me" onclick="alert('Click!')" type="button">
A significant thing regarding the syntax to note here is that while using the HTML attribute by convention, users must use single quotes inside the onClick because the attribute has double quotes.
Handler Using DOM property
Another way of assigning a handler to an event is using a DOM property named “on<event>.”
When a developer assigns a handler by using an HTML attribute, the browser analyzes it and creates the function from the content in the attribute. Finally, the browser writes the function to the DOM property. Therefore, the following two pieces of code execute the same response:
<input type="button" onclick="alert('Click!')" value="Button">
<input type="button" id="button" value="Button">
<script>
button.onclick = function() {
alert('Click!');
};
</script>
Using Window Object for Browser Operations
The users can apply the various event handlers and the window object to perform various browser operations. JavaScript helps access and manipulate the browser objects to create an appropriate response to an event. Following are some examples of manipulating browser objects using JavaScript:
Open a New Window
The developers can create a handler to open a new window when a user clicks the button. Following is a sample of creating such a response:
<html>
<head>
<script>
function openWin() {
window.open("https://google.com");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openWin()">
</form>
</body>
</html>
In this example, there is a function that uses the window object along with the onClick handler. It opens a website provided in the function. Similarly, the window object can help execute various browser operations. Following are some of the primary browser operations the users can manipulate by using the window object:
- Close a new window
- Write a text in the parent window
- Resize the window
- Scroll to specific pixels or position
- Print the current window
Using History Object for Browser Operations
The users can apply the various event handlers and the history object to perform various browser operations. JavaScript helps access and manipulate the history objects to create an appropriate response to an event. Following are some examples of manipulating history objects using JavaScript:
Create Go Back Button
The developers can create a handler to go back to the page a user came from when the user clicks the button. Following is a sample of creating such a response:
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<button onclick="goBack()">Go Back</button>
</body>
</html>
In this example, the function uses the history object and the onClick handler to create a go-back button by maintaining the previous URL in the history list. Similarly, the history object can help execute various browser operations. Following are some of the browsers operations a user can manipulate by working with the history object:
- Displaying the total number of URLs in the history list
- Load a specific URL
- Create a forward button
Using Popup Boxes for Browser Operations
The developers can use JavaScript to create pop-up boxes. The pop-up boxes prove extremely helpful while working with browser operations. They help the users to walk through various scenarios and make a web page interactable for the end user. These pop-up boxes can vary from simple informative text boxes to highly crucial ones with necessary user actions. Following are some of the examples of using pop-up boxes for browser operations:
Display a Simple Alert Box
The developers can create a simple pop-up box using an onClick event handler. The developers have to create a function having an alert that specifies the content of the pop-up box. The following piece of code explains the working of a simple alert box:
<html>
<body>
<button onclick="myFunction()">Alert</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
Similarly, the developers can create various popup boxes with different information. The users can interact with these boxes and select the appropriate option to proceed to the following browser operation. Following are some examples of popup boxes the developers can manipulate using JavaScript:
- Create a confirm box
- Create a prompt box
- Create Line breaks in popups
Moreover, there are various events a user can access and manipulate while working with browser operations using JavaScript. These events include mousemove, mouseover, contextmenu, keyup, keydown, focus, submit, transitioned, DOMContentLoaded, mouseup, mousedown, mouseout, and many others. Furthermore, there are various concepts like bubbling and capturing to manipulate event handlers. The developers can create event handlers and pop-up boxes for such events to make meaningful changes to the web page and increase user interaction with the help of JavaScript.
