JavaScript - WEBAPIS_BOM object and js execution mechanism

1. Common keyboard events

1.1 Keyboard Events

These three keyboard events, which we trigger by listening for events

        // Common keyboard events
        //1. Trigger when Keyup key pops up 
        document.addEventListener('keyup', function() {
            console.log('I bounce up');

        //3. Key press triggers unrecognized function keys such as ctrl shift Left and right arrows
        document.addEventListener('keypress', function() {
                console.log('I pressed press');
        //2. When the Keydown key is pressed, trigger recognizable function keys such as ctrl shift Left and right arrows
        document.addEventListener('keydown', function() {
                console.log('I pressed down');
        // 4.The execution order of the three events keydown -- keypress -- keyup

Notice the difference between them

1.2 Objects for keyboard events

The properties of the keyboard event, mainly KeyCode, put back the ASCII value of the key, and notice that the event object e
Instance code:

        // The keyCode attribute in the keyboard event object gets the ASCII code value of the corresponding key
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // We can use the ASCII code value returned by keycode to tell which key the user pressed.
            if (e.keyCode === 65) {
                alert('The one you pressed a key');
            } else {
                alert('You did not press a key')
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);


2.1 Basic Knowledge

BOM is a browser object model, BOM lacks standards, the standardization organization of JavaScript syntax is ECMA, the standardization organization of DOM is W3C, and BOM was originally part of Netscape browser standards.Compatibility is poor.

DOM's top object is document, BOM's top object is window

2.2 Components of BOM objects

It is a top-level object with two roles.

  1. An interface for js to access browser interface
  2. A global object, everything defined in it, becomes its properties and methods and can be called without window.
  3. It comes with a special attribute:

2.3 Common events for windows objects

Next, let's talk about its common events.

  1. Page (window) loads events so that we can put the script tag in front.He has two types
window.onload = function(){}perhaps
// Second
//The first is called after the page has been fully loaded, the second is called only after the DOM has been fully loaded, not including your style sheet.IE9 or above is supported and has compatibility issues.
//The second is more common.Smooth interaction
  1. Adjust Create Size Event
winidow.onresize = function(){}

We often use it to do some corresponding layout

    // Register Page Load Events
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            // Register resize window events
            window.addEventListener('resize', function() {
                // window.innerWidth Get Window Size
                if (window.innerWidth <= 800) {
           = 'none';
                } else {
           = 'block';

2.4 Timer (two types)

This is very important!!!There are two types,

Window.setTimeout (call function, delay event (ms)), where ha, this incoming function is also called callback function
 The same is true for window.setInterval()

Code example:

  1. Use timer
//    1. First timer
        // Callback function is an anonymous function
         setTimeout(function() {
             console.log('Time out');

         }, 2000);
        function callback() {
        // A callback function is a named function
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
//    2. The second timer, the alarm timer, means that like an alarm clock, it sounds every other event
       // . setInterval 
        setInterval(function() {
            console.log('Continue Output');
        }, 1000);
  1. Remove the timer
<!-- clearTimeout()That's it. -->

  <button>Click Stop Timer</button>
        var btn = document.querySelector('button');
        // Turn on the timer
        var timer = setTimeout(function() {
        }, 5000);
        // Register click events for buttons
        btn.addEventListener('click', function() {
            // Stop Timer

2.5 this Pointing Problem

What we need to understand at this stage is that this points to window in ordinary functions.

In the method, point to the caller

2.6 location object

The location object, which can parse some url parameters in the address bar, is very important for later development!

  1. About http and URl, please Baidu, some of it
  2. Here are the properties of the location object, as well as common methods

href and search are important!!!

Code Samples

# 1. Event arrives at auto jump page
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = '';
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = '';
            } else {
                div.innerHTML = 'You will be' + timer + 'Jump to the first page in seconds';
        }, 1000);

# 2. Take parameters from address
        console.log(; // ?uname=andy
        // 1. Remove first?substr('start position', intercept several characters);
        var params =; // uname=andy
        // 2. Use = to split the string into arrays ('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3. Write the data into the div
        div.innerHTML = arr[1] + 'Welcome';

2.7 navigator object

This contains all the information of the browser

  1. Too many attributes, what are the common ones, userAgent, which contains a lot of information, you can browse through the document

Code Instances - Determine what sites a user visits and call different addresses to access them

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //Mobile phone
 } else {
    window.location.href = "";     //Computer

2.8 history object

Here, just a few brief instructions,

3.JS execution mechanism, and js threading issues!

  1. There are two tasks for js

    All tasks in JS can be divided into two types, synchronous and asynchronous.
    Synchronization tasks refer to:
      Tasks queued on the main thread can only be executed after the previous task has been executed.
    Asynchronous tasks refer to:
      Tasks that do not enter the main thread but enter the Task Queue will not remove asynchronous tasks from the Task Queue until the tasks in the main thread are finished and put them into the main thread for execution.
  2. What are asynchronous tasks?

Normal time, resource load, timer, callback functions, and of course some, you can go to the MDN documentation
  1. Execution order,
    Synchronize first, then asynchronous.The order in which asynchronous tasks are executed depends on the actual code.To analyze.
    One thing is certain, however, that once a synchronous task is executed in the queue of synchronous tasks, js will go back to look at the asynchronous tasks in the task queue and, if so, get to the execution stack to execute them.

Tags: Javascript ascii Attribute Windows Mobile

Posted on Tue, 10 Mar 2020 22:58:30 -0400 by cwncool