Client-side JavaScript programs use an asynchronous event-driven programming model. In this style of programming, the web browser generates an event whenever something interesting happens to the document or browser or to some element or object associated with it.

You can register one or more functions to be invoked when events of that type occur.

• event type: This string specifies what kind of event occurred ("mousemove","keydown"). Because the type of an event is just a string, it's sometimes called an event name.
• event target: This is the object on which the event occurred or with which the event is associated.
• event handler, or event listener: This function handles or responds to an event. Applications register their event handler functions with the web browser, specifying an event type and an event target. When an event of the specified type occurs on the specified target, the browser invokes the handler function. When event handlers are invoked for an object, we say that the browser has “fired,” “triggered,” or “dispatched” the event.

There are two basic ways to register event handlers. The first, from the early days of the web, is to set a property on the object or document element that is the event target. The second (newer and more general) technique is to pass the handler to the addEventListener() method of the object or element.

Setting event handler properties

The simplest way to register an event handler is by setting a property of the event target to the desired event handler function. By convention, event handler properties have names that consist of the word “on” followed by the event name: onclick, onchange, onload, onmouseover, and so on. Note that these property names are case sensitive and are written in all lowercase.

The shortcoming of event handler properties is that they are designed around the assumption that event targets will have at most one handler for each type of event.

Setting event handler attributes

The event handler properties of document elements can also be defined directly in the HTML file as attributes on the corresponding HTML tag.

When defining an event handler as an HTML attribute, the attribute value should be a string of JavaScript code. That code should be the body of the event handler function, not a complete function declaration.

If an HTML event handler attribute contains multiple JavaScript statements, you must remember to separate those statements with semicolons or break the attribute value across multiple lines.

addEventListener() Any object that can be an event target—this includes the Window and Document objects and all document Elements—defines a method named addEventListener() that you can use to register an event handler for that target. addEventListener() takes three arguments. The first is the event type for which the handler is being registered. The event type (or name) is a string that does not include the “on” prefix used when setting event handler properties. The second argument to addEventListener() is the function that should be invoked when the specified type of event occurs. The third argument is optional.

Calling addEventListener() with “click” as its first argument does not affect the value of the onclick property.

More importantly, you can call addEventListener() multiple times to register more than one handler function for the same event type on the same object. When an event occurs on an object, all of the handlers registered for that type of event are invoked in the order in which they were registered. Invoking addEventListener() more than once on the same object with the same arguments has no effect—the handler function remains registered only once, and the repeated invocation does not alter the order in which handlers are invoked.

addEventListener() is paired with a removeEventListener() method that expects the same two arguments (plus an optional third) but removes an event handler function from an object rather than adding it.

The position of a document element is measured in CSS pixels, with the x coordinate increasing to the right and the y coordinate increasing as we go down. There are two different points we can use as the coordinate system origin, however: the x and y coordinates of an element can be relative to the top-left corner of the document or relative to the top-left corner of the viewport in which the document is displayed.

Note that viewport coordinates are sometimes called "window coordinates".

If the document is smaller than the viewport, or if it has not been scrolled, the upperleft corner of the document is in the upper-left corner of the viewport and the document and viewport coordinate systems are the same. In general, however, to convert between the two coordinate systems, we must add or subtract the scroll offsets.

You can determine the size (including CSS border and padding, but not the margin) and position (in viewport coordinates) of an element by calling its getBoundingClien tRect() method. It takes no arguments and returns an object with properties left, right, top, bottom, width, and height.

If you want to determine which element is at a given location in the viewport. You can determine this with the elementFromPoint() method of the Document object. Call this method with the x and y coordinates of a point (using viewport coordinates, not document coordinates: the clientX and clientY coordinates of a mouse event work, for example). elementFromPoint() returns an Element object that is at the specified position.

The scrollTo() method of the Window object takes the x and y coordinates of a point (in document coordinates) and sets these as the scrollbar offsets. That is, it scrolls the window so that the specified point is in the upper-left corner of the viewport.

The scrollBy() method of the Window is similar to scrollTo(), but its arguments are relative and are added to the current scroll position.

If you want to scroll smoothly with scrollTo() or scrollBy(), pass a single object argument instead of two numbers with behavior: "smooth" property.

Often, instead of scrolling to a numeric location in a document, we just want to scroll so that a certain element in the document is visible. You can do this with the scrol lIntoView() method on the desired HTML element. This method ensures that the element on which it is invoked is visible in the viewport. By default, it tries to put the top edge of the element at or near the top of the viewport. If false is passed as the only argument, it tries to put the bottom edge of the element at the bottom of the viewport. The browser will also scroll the viewport horizontally as needed to make the element visible.

For browser windows, the viewport size is given by the window.innerWidth and win dow.innerHeight properties.

You can call getBoundingClientRect() on docu ment.documentElement to get the width and height of the document, or you can use the offsetWidth and offsetHeight properties of document.documentElement. The scroll offsets of the document within its viewport are available as window.scrollX and window.scrollY. These are read-only properties.

Every Element object defines the following three groups of properties:

• offsetWidth and offsetHeight properties of an element return its on-screen size in CSS pixels. The returned sizes include the element border and padding but not margins.
• offsetLeft and offsetTop properties return the x and y coordinates of the element.
• offsetParent property specifies which element the properties are relative to. These offset properties are all read-only.
• clientWidth and clientHeight are like offsetWidth and offsetHeight except that they do not include the border size—only the content area and its padding.
• clientLeft and clientTop properties return the horizontal and vertical distance between the outside of an element's padding and the outside of its border.
• scrollWidth and scrollHeight return the size of an element's content area plus its padding plus any overflowing content. When the content fits within the content area without overflow, these properties are the same as clientWidth and clientHeight. But when there is overflow, they include the overflowing content and return values larger than clientWidth and clientHeight.
• scrollLeft and scrollTop give the scroll offset of the element content within the element's viewport.

All the other properties described here, are read-only except scrollLeft and scrollTop are writable properties