Browser object Model

What is the Browser object Model

  • BOM:Browser Object Model (BOM). The Browser Object Model provides a content-independent Object structure that slides with the Browser window.
  • Its main objects are:
  1. Window object: The core of BOM is the js interface to access the browser. It is also the Global object specified by ES.
  2. Location object: Provides information about the loaded document in the current window and some navigation capabilities. It is both a window object property and a Document object property.
  3. Navigation object: gets system information about the browser (get browser information like name, version number, etc.).
  4. Screen object: Used to represent information about the display outside the browser window.
  5. Hitory object: stores historical Internet access information of users.

The window object

Windows objects are the core of the browser object model, acting as both interfaces and global objects. Alert () Confirm () prompt() open() onError () setTimeout() setInterval()

  • The window position

screenLeft

screenTop

screenX screenY moveBy(x,y)

moveTo(x,y)

  • The window size

innerWidth

innerHeight

outerWidth

outerHeight

resizeTo(width, height)

resizeBy(width, height)

  • The timer

setTimeout

setInterval

Location object

Provides information about the loaded document in the current window and some navigation capabilities. It is both a window object property and a Document object property

The main property of the location object is hash host hostname href pathname port protocol Search

Navigation object

The Navigation interface represents the status and identity of the user agent, allowing the script to query it and register itself for some activities

The History object

The history object holds a history of the user’s Internet access from the moment the window was opened. The history object is represented by the window’s browsing history in the form of documents and a list of document states.

go()

back()

forword()

length

Browser events: capture, bubble

The process in the browser event model is divided into three phases: capture phase, target phase, and bubble phase.

The third parameter to addEventListener

    addEventListener('Event name', event-triggering function, capture phase execution or bubble phase execution)Copy the code

The third argument to addEventListener, as described above, specifies whether the event is fired in the capture phase or the bubble phase. If true, it is executed in the capture phase. If false, it is in the bubbling phase.

Preventing an event from spreading

  • e.stopPropagation()

One of the things you hear a lot about is preventing bubbling, but this actually prevents not only bubbling, but also the propagation of the capture phase.

  • stopImmediatePropagation()

If there are multiple event listeners of the same type of event bound to the same element, when events of that type are fired, they are executed in the order in which they were added. If one monitor function performs the event stopImmediatePropagation () method, which is the rest of the current element to monitor function will not be executed.

Blocking default behavior

e.preventDefault()

E.preventdefault () prevents the default behavior of the event, such as clicking the A TAB to jump to another page, dragging an image to the browser to open automatically, clicking the submit button on a form to submit the form, etc., because sometimes we don’t want these things to happen, so we need to prevent the default behavior.

compatibility

AttachEvent — Compatible with IE7 and IE8; The third parameter is not supported to control which phase occurs, the default is to bind addEventListener in bubbling phase — compatible with: Firefox, Chrome, IE, Safari, Opera;