JavaScript WebAPI 系列四 键盘事件；顶级对象window；窗口加载事件；调整窗口大小事件；定时器；location对象；navigator对象；history对象及方法

最新推荐文章于 2023-11-01 17:59:04 发布
最新推荐文章于 2023-11-01 17:59:04 发布
阅读量357 收藏 1
点赞数
分类专栏： WEB API 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_55170432/article/details/115308632
版权
本文详细讲解了JavaScript中的键盘事件，包括onkeyup、onkeydown和onkeypress，以及如何模拟京东按键输入和快递单号查询。还介绍了BOM浏览器对象模型，特别是顶级对象window，探讨了BOM与DOM的区别。文章深入讨论了window对象的事件，如窗口加载事件和调整窗口大小事件，并介绍了setTimeout和setInterval定时器的使用，包括停止定时器的方法。此外，还涉及了location对象用于页面跳转和参数获取，navigator对象获取浏览器信息，以及history对象处理浏览器历史记录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.0 常见的键盘事件以及对象

事件除了使用鼠标触发，还可以使用键盘触发， 注意给文档 document 添加键盘事件

键盘事件

  1. onkeyup （某个键盘按键被松开时触发）
  2. onkeydown （某个键盘按键被按下是触发）
  3. onkeypress （某个键盘按键被按下时并且弹起时触发）这个基本不用！
    它不识别功能键，比如左右箭头，shift 等；并且他区分大小写

事件对象：

  1. keyCode 是事件对象（返回改建的ASCLL表的值）

注意：

  1. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
  2. onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
  3. 三个事件是有执行顺序的！！！！不管怎么排序都是 keydown – keypress – keyup
        1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');
        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            
        2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
        4. 三个事件是有执行顺序的！！！！不管怎么排序都是  keydown -- keypress -- keyup

        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

1.1 案例： 模拟京东按键输入内容

        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })

1.2 案例： 模拟京东快递单号查询

        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })

2.0 BOM浏览器对象模型

2.1 BOM浏览器对象模型

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2.2 BOM 和 DOM 区别

DOM

  1. 文档对象模型
  2. DOM 就是把「文档」当做一个「对象」来看待
  3. DOM 的顶级对象是 document
  4. DOM 主要学习的是操作页面元素
  5. DOM 是 W3C 标准规范

BOM

  1. 浏览器对象模型
  2. 把「浏览器」当做一个「对象」来看待
  3. BOM 的顶级对象是 window
  4. BOM 学习的是浏览器窗口交互的一些对象
  5. BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

2.3 BOM 的构成—顶级对象 window

BOM 比 DOM 更大，它包含 DOM。

window 对象是浏览器的顶级对象，它具有双重角色。

  1. 它是 JS 访问浏览器窗口的一个接口。
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
注意：window下的一个特殊属性 window.name 有很多

        // window.document.querySelector()
        var num = 10;
        console.log(num);
        console.log(window.num);

        function fn() {
            console.log(11);

        }
        fn();
        window.fn();
        // alert(11);
        // window.alert(11)
        console.dir(window);
        // var name = 10;
        console.log(window.name);

3.0 window 对象的常见事件

2.1 窗口加载事件

1.window.onload = function(){} 或者 window.addEventListener(“load”,function(){});

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。
  2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制
        老版本：
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        }
        window.onload = function() {
            alert(22);
        }
        
        新版本：
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })

2.document.addEventListener(‘DOMContentLoaded’,function(){}) （Ie9以上才支持）
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })

两个窗口加载事件的区别：

  1. load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
  2. DOMContentLoaded 是 DOM 加载完毕，不包含图片 fla sh css 等就可以执行 加载速度比 load更快一些

2.2 调整窗口大小事件 onresize

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

  1. window.onresize = function(){}
  2. window.addEventListener(“resize”,function(){});
  3. window.innerWidth 当前屏幕的宽度
    注意：
  4. 只要窗口大小发生像素变化，就会触发这个事件。
  5. 我们经常利用这个事件完成响应式布局。
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);
                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })

3.0 两种定时器

window 对象给我们提供了 2 个非常好用的方法–定时器

  1. setTimeout()
  2. setInterval()

3.1 setTimeout() 定时器

  1. window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
          写法一
        setTimeout(function() {
            console.log('3秒后我来了')
        }, 3000)

          写法二
        function fn() {
            console.log('5秒后我来了');
        }
         要赋值一个标识符。
        var timer1 = setTimeout(fn, 5000);
        var timer2 = setTimeout(fn, 10000);

         写法三   不提倡这种写法
        function fn1() {
            console.log('7秒后我来了');
        }
        setTimeout('fn1()', 7000)

3.2 案例： 5秒后自动关闭的广告

案例分析

  1. 核心思路：5秒之后，就把这个广告隐藏起来
  2. 用定时器setTimeout
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);

3.3 停止 setTimeout() 定时器

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

  1. window.clearTimeout(timeoutID)（里面的参数就是定时器的 标识符 ）
        var ad = document.querySelector('.ad');
        var timer = setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
        
        点击 btn 停止关闭定时器
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            clearTimeout(timer)
        })

3.4 setInterval() 定时器

方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

  1. window.setInterval(回调函数, [间隔的毫秒数]);

注意：

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
  5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
        1. 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
                console.log('每隔5秒我出现一次');
            }, 5000)
        2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
         
        4. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

3.5 停止 setInterval() 定时器

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

  1. window.clearInterval(intervalID);

3.6 案例： 倒计时

案例分析：

  1. 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
  2. 三个黑色盒子里面分别存放时分秒
  3. 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
  4. 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
  5. 最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-3-13 14:00:00');
        countDown(); // 我们要先调用一次这个函数，防止第一次刷新页面会有空白
         2.开启定时器
        setInterval(countDown, 1000);
        
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
            var h = parseInt(times / 60 / 60 % 24); // 时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时 给 小时的黑盒子
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

3.7 案例： 发送短信

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

案例分析：

  1. 按钮点击之后，会禁用 disabled 为true
  2. 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
  3. 里面秒数是有变化的，因此需要用到定时器
  4. 定义一个变量，在定时器里面，不断递减
  5. 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
    手机号码： <input type="number"> <button>发送</button>

        var btn = document.querySelector('button');
        var times = 5; // 定义剩余的数字
        btn.addEventListener('click', function() {
            this.disabled = true;
            var timer = setInterval(function() {
                if (times == 0) {
                    //  清除定时器和复原按钮
                    clearInterval(timer)
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    times = 5; // 这个5需要从新开始
                } else {
                    btn.innerHTML = '还剩下' + times + '秒';
                    times--;
                }
            }, 1000)
        })

3.8 this指向问题

现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例
        this 指向问题 一般情况下this的最终指向的是那个调用它的对象

         1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
        3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();

4.0 JS 执行机制

4.1 JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

		1和2 都是回调函数 都会进入等待队列，就算0秒后指向 也会进入等待队列
		
         第一个问题         1  2  3 
         console.log(1);

         setTimeout(function() {

             console.log(3);

         }, 1000);

         console.log(2);

         2. 第二个问题     1 2 3
         console.log(1);

         setTimeout(function() {

             console.log(3);

         }, 0);

         console.log(2);

         3. 第三个问题     1 2 3  点击才会出现 click
        console.log(1);
        document.onclick = function() {
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3)
        }, 3000)

4.2 同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

1.同步：（同步任务都在主线程上执行，形成一个执行栈。）
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

2.异步：（JS 的异步是通过回调函数实现的。）
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。
一般而言，异步任务有以下三种类型:

  1. 普通事件，如 click、resize 等
  2. 资源加载，如 load、error 等
  3. 定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

3.他们的本质区别： 这条流水线上各个流程的执行顺序不同。

4.3 JS 执行机制

  1. 先执行执行栈中的同步任务。
  2. 异步任务（回调函数）放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环：
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

5.0 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

5.1 URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：

  1. protocol://host[:port]/path/[?query]#fragment （对应下面）
  2. http://www.itcast.cn/index.html?name=andy&age=18#link

组成说明：

  1. protocol 通讯协议 常用的 http、ftp 、maito等
  2. host 主机（域名）www.wangsihua.com
  3. port 端口号 可选，省略时使用方案的默认端口 如 http的默认端口是 80
  4. path 路径由 零 或 多个 / 符号隔开的字符串，一样用来表示主机上的一个目录或文件夹
  5. query 参数 以键值对的形式，通过 & 符号分隔开
  6. fragment 片段 #后面的内容 常见于锚点、链接

5.2 location 对象的属性

  1. location.href （获取或者设置 整个 URL）
  2. location.host （返回主机域名 ）
  3. location.port （返回端口号）
  4. location.pathname （返回路径）
  5. location.search （返回参数）
  6. location.hash （返回片段 #后面的内容）

重点记住： href 和 search

5.3 案例： 5秒钟之后自动跳转页面

① 利用定时器做倒计时效果
② 时间到了，就跳转页面。 使用 location.href

        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        btn.addEventListener('click', function() {
            var times = setInterval(function() {
                if (timer == 0) {
                    location.href = 'http://www.baidu.com';
                    clearInterval(times)
                } else {
                    div.innerHTML = '请稍等' + timer + '秒后跳转';
                    timer--;
                }
            }, 1000)
        })

5.4 案例： 获取 URL 参数数据

主要练习数据在不同页面中的传递。

  1. 第一个登录页面，里面有提交表单， action 提交到 index.html页面
  2. 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
  3. 第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
  4. 在第二个页面中，需要把这个参数提取。
  5. 第一步去掉？ 利用 substr
  6. 第二步 利用=号分割 键 和 值 split(‘=‘)
  7. 第一个数组就是键 第二个数组就是值
		1. index 页面
        var div = document.querySelector('div');
        // console.log(location.search);  是得到了 ？name=uname
        var name1 = location.search;
        var name2 = name1.substr(1); // 删除第一个字符串 也就是 ？
        var name3 = name2.split('='); // 把字符串变成数组，删除里面的 = 号
        div.innerHTML = name3[1] + '欢迎你'; // 他只有两个数组  所以而二个数据 就是它填的那个信息

		2. login 页面	
		 <!-- form 里面要写 存储的数据地址 才能跳转 -->
    <form action="index.html">
        <!-- name的内容是给存储数据 命名 -->
        <input type="text" value="" name="uname">
        <input type="submit" value="登录">
    </form>

5.5 location 对象的方法

  1. location.assign(‘http://www.itcast.cn’) （跟 href 一样，可以跳转页面）（记录浏览历史，所以可以实现后退功能）
  2. location.replace(‘http://www.itcast.cn’) （替换当前页面，因为不记录历史，所以不能后退页面）
  3. location.reload(true); 重新加载页面，相当于刷新按钮或者 F5 如果参数为 true ，则 强制刷新 ctrl + f5
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            location.replace('http://www.itcast.cn');
            // 如果不写值，就是默认的重新刷新页面，相当于点了刷新按钮，这个刷新刷新不了以前读取过的数据，会有一些本地缓存数据   相当于浏览器的 F5
            // 加了 true 就是强制刷新！也就是重新读取整个网页   相当于浏览器的  ait + f5
            location.reload(true);
        })

6.0 navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

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 = ""; //手机
} else {
 window.location.href = ""; //电脑
}

7.0 history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

history 对象方法：

  1. history.back() （可以后退功能）
  2. history.forward() （前进功能）
  3. history.go(参数) （前进后退功能，参数如果是1 前进一个页面 如果是 -1 后退一个页面）

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

11-BOM-概述和组成对象（window、history、location、navigator、screen、document）
记录java学习日常~
05-17 1125
BOM（Browser Object Model）是浏览器对象模型的缩写，指的是由浏览器提供的一组对象和方法，可以通过JavaScript来操作和管理浏览器。全局作用域：Window对象是全局对象，它包含了所有的JavaScript变量和函数。因此，可以在脚本的任何地方访问和修改Window对象的属性和方法。对象层次结构：如果窗口中嵌套了框架，则每个框架都是一个Window对象。Window对象形成了一个对象层次结构，可以通过Window的属性和方法来访问和操作其中的文档和元素。
JavaScript 中的 Window 对象详解
最新发布
读心悦
05-18 975
Window 对象是浏览器中 JavaScript 的全局对象，代表浏览器窗口。它是 JavaScript 环境的顶层对象，所有全局变量和函数都是它的属性和方法。在浏览器中，Window 对象同时也是 Document 对象的宿主，提供了操作浏览器窗口的各种功能。
js，模拟键盘
08-24
js，模拟键盘
浏览器中的JavaScript核心BOM（浏览器对象模型）对象Navigator和Screen的简单了解
零一的博客
06-08 2583
浏览器中内置对象Navigator和对象Screen的简单了解引言正文一、Navigator对象二、Screen对象结束语 引言 想必大家很奇怪，为什么本文是简单了解。其实BOM虽然提供了很多对象供我们去使用，但是有些对象其实是不那么重要的，例如本文要将的两个对象——Navigator和Screen。所以大家只需要看一看，了解一下有这样的属性和用法就可以啦 正文 一、Navigator对象 Navigator对象主要是用来帮助我们获取浏览器的一些信息的，例如浏览器的名称 、浏览器编译版本 、浏览器的语言 、
javascript-之-BOM 浏览器对象模型（ BOM 的核心--window）
qq_42072844的博客
04-19 775
BOM（Browser Object Model 浏览器对象模型） BOM的概述 1、什么是BOM BOM（Browser Object Model）： 浏览器对象模型 BOM 的核心就是 window 对象 把浏览器当作一个对象来看待 （window 是浏览器内置的一个对象，里面包含着操作浏览器的方法） BOM学习是浏览器窗口的一些对象 获取一些浏览器的相关信息（窗口的大小） 操作浏览器进...
浏览器中的JavaScript核心BOM（浏览器对象模型）重点掌握对象之Location对象的属性与方法
零一的博客
06-07 2234
Windows对象在客户端中的属性详解引言 引言 我们知道javascript是运行在浏览器上的，并且浏览器提供了
JavaScript 模拟键盘事件和鼠标事件（比如模拟按下回车等）
热门推荐
小桥流水丿小溪
09-08 7万+
原文链接： 最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样，下面分别说明： 1. IE下没什么问题，创建事件对象、对对象的keyCode属性赋值，然后再抛出来就行了： evtObj = document.createEventObject(); evtObj.keyCode=keyCode el.fireEve
浏览器对象模型(BOM)的核心对象window详解及其事件应用
02-13
此外，讨论了几种关键性的浏览器内置对象如location用于URL操作、navigator识别浏览器版本、history管理页面导航记录。对于实际开发场景而言，则重点讲述了基于BOM的两种典型任务——设定延时/周期性的执行动作...
【温故而知新】JavaScript的BOM之Window对象.md
06-13
### JavaScript的BOM之Window对象 #### 一、概念 BOM（Browser Object Model）即浏览器对象模型，它是JavaScript中的一个重要组成部分，为开发者提供了与浏览器交互的能力。BOM定义了一系列的对象，通过这些对象...
浅述Javascript的外部对象
10-20
首先，BOM包含了Window、History、Location和Navigator对象，它们是JavaScript中用于控制浏览器窗口的主要对象。 1. Window对象是JavaScript中最重要的全局对象，它代表了浏览器的一个窗口或者一个标签页。Window...
js模拟键盘
08-19
js模拟键盘，简单模拟
模拟QQ的js 模拟键盘输入
03-30
类似QQ的js 模拟键盘输入,喜欢的可以看看!
采用纯js脚本实现的键盘输入模拟器脚本源码例子
09-18
VirtualKeyboard.full.3.5.1，是采用纯js脚本实现的键盘输入模拟器脚本源码例子，可以用于web网页的键盘输入，通过鼠标方式响应键盘操作，功能强大。
JS实现windows.open打开窗口并居中
weixin_34390996的博客
07-06 171
function openWin() {            var url='Add.aspx';                             //转向网页的地址;            var name='add';                            //网页名称，可为空;            var iWidth=720;           ...
js 模拟键盘输入
LuckyTHP
05-23 1万+
var e = jQuery.Event("keyup");//模拟一个键盘事件 e.keyCode =13;//keyCode=13是回车 $("#test").trigger(e);
javascript模拟键盘输入
tw11223344的博客
07-09 879
今天在工作遇到一个问题跟大家分享一下： 需求是这样的，在一个B/S的系统中需要调用浏览器的“查找”功能，通常我们的操作是：使用快捷键“Ctrl+F”，但是我的要求是需要通过 JavaScript来主动激活。我先是通过document对象的方法execCommand查找，最后发现没有查找功能，但是它很有用，我把它总结如下： 常用Js代码document.execCommand()的作用： ...
js自动模拟用户键盘输入/自动触发输入事件/自动触发input事件
qq_17627195的博客
11-01 5571
输入框自动填写内容后，无法触发表单的提交，需要出发input事件。
js软键盘模拟输入
happywsyhgff的博客
10-20 1034
HTML代码 <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span c...
JavaScript Window对象参考手册：即用即查指南
Window对象是JavaScript中极为重要的核心对象，它为开发人员提供了一套丰富的API来管理浏览器窗口和控制用户的交互。通过Window对象的方法和属性，开发人员可以实现页面导航、控制页面加载、获取用户输入、管理时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值