- What is a function?
- Pre-defined functions
- Scope of Variables
- Function Expressions
- Anonymous Functions
- Callback Functions
- What is an object?
- Accessing Object Properties
- Calling an Object’s Methods
- Altering Properties/Methods
Array Properties and Methods
- The length property
- Stack Methods
- Queue Methods
- Reordering Methods
- Manipulation Methods
- Location Methods
- Iterative Methods
- Working with array of objects
- The Document Object Model
- Node Relationships
- Working with the Contents of Elements
- Getting Elements by ID, Tag Name, or Class
- Adding and removing element
Handling Input and Output
Ajax and JSON
- Mouse events.
- Keyboard events.
- Form events.
- Window events.
Mouse events occur whenever we interact with the HTML document with the mouse. For example, click, double click, mouseover, mouseenter, mouseleave, mousemove etc.
Lets go through some of these mouse events below.
click: The click event occurs when we click on a HTML element with the mouse or touchpad. Whenever we click on any buttons or tabs, this click event is fired.
dblclick: The dblclick event occurs when we double click on any element.
mouseover: The mouseover event occurs when we hover the mouse pointer over any element.
mouseenter: The mouseenter event occurs when the mouse pointer enters onto an element.
mouseleave: The mouseleave event occurs when the mouse pointer moves out of an element.
mousemove: The mousemove event occurs whenever the mouse pointer moves.
contextmenu: The contextmenu event occurs whenever we right click on any element.
Keyboard events occur whenever we perform key actions on the keyboard. There are three keyboard events:
keypress: The keypress event occurs whenever we press a key on the keyboard.
keydown: The keydown event occurs whenever we press down a key on the keyboard.
keyup: The keyup event occurs whenever we release a key on the keyboard.
Form events occur when we perform actions on HTML forms. Below are the form events:
submit: The submit event occurs when we submit a form by clicking on a submit button(<button> or <input type=”submit”>).
reset: The reset event occurs when we reset the form by clicking on a reset button(<button> or <input type=”reset”>)
Window events are various events that can happen in a particular window like scrolling the page, resizing the window etc. Examples:
scroll: The scroll event occurs when we scroll the window by any means like using the mouse scroll wheel or dragging the scrollbar.
resize: The resize event occurs when we resize(increase or decrease the size) the window.
load: The load event occurs when the whole page is fully loaded, including all resources(scripts, stylesheets etc.) and the DOM for a particular window.
We will discuss how to handle these events in the next section.