美文网首页es6前端开发那些事儿JavaScript
【前端 JavaScript WebAPI】04 - 常用键盘事

【前端 JavaScript WebAPI】04 - 常用键盘事

作者: itlu | 来源:发表于2020-12-04 16:57 被阅读0次

    1. 键盘事件

    常用键盘事件
    注意

    1. 如果使用 addEventListener注册事件时不需要为事件加上 on。

    2. onkeypress 和前面两个的区别是他不能识别功能键。比如ctrl shift等等。

    3. 三个事件的执行顺序是 ：keydown ->keypress -> keyup。

    1.1 键盘事件对象

    键盘事件对象 注意事项
    使用keyCode属性判断当前按下的是哪个键
    document.addEventListener('keyup', function (ev) {
    // console.log(ev);
    // console.log(ev.key); // 有比较大兼容性问题
    console.log('up', ev.keyCode); // 有比较大兼容性问题
    if (ev.keyCode === 65) {
      alert('您按下的是 a');
    } else {
      alert('您按下的不是 a');
    }
  });

  // 1. keyup 和 keydown 事件不区分字母大小写
  document.addEventListener('keydown', function (e) {
    console.log('down', e.keyCode);
  });
  // 2. keypress 事件区分字母大小写
  document.addEventListener('keypress', function (e) {
    console.log('press', e.keyCode);
  })

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

    1. 按下s键后将鼠标光标定位到输入框中。

    注意：触发输入框获取焦点的方法是 .focus()

    <input type="text" name="search" id="search" placeholder="请输入搜索关键字">

     let search = document.querySelector('input');
  /**
   * 当按键抬起的时候将光标定位到input
   */
  document.addEventListener('keyup', function (e) {
    if (e.keyCode === 83) {
      search.focus();
    }
  });

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

    1. 【前端案例】09 - 实时显示文本框输入内容 - 简书

    2. BOM 浏览器对象模型

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

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

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

    2.1 BOM 和 DOM的区别

    BOM

    1. 浏览器对象模型；

    2. 将浏览器当做一个对象来对待；

    3. BOM的顶级对象是window；

    4. BOM学习的是浏览器窗口交互的一些对象；

    5. BOM是浏览器厂商在各自浏览器上定义的，兼容性比较差。

    DOM

    1. 文档对象模型；

    2. DOM就是将文档当做一个对象来对待；

    3. DOM的顶级对象是document；

    4. DOM主要学习的是操作页面元素；

    5. DOM是w3c标准规范。

    2.2 BOM的构成

    1. BOM 比 DOM 更大，它包含了DOM；
    BOM的构成

    2.3 顶级对象window

    页面窗口加载事件
    1. 第一种方式：
    window.onload = function(){}

或者 

window.addEventListener('load',function(){});

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

    注意

    1. 有了window.onload就可以将JS代码写到页面的元素上方，因为onload是等页面内容全部加载完毕，再执行 处理函数。

    2. window.onload 传统注册方式，只能写一次，如果注册多次，会以最后一个window.onload为准。

    3. 如果使用addEventListener则没有注册次数的限制。

    1. 第二种方式
    /**
   * 不用等到图片CSS等加载完就可以
   */
  document.addEventListener('DOMContentLoaded', function () {
     ... 
  });
    • DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
    • IE9以上才支持！！！
      如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
      /**
   * 使用addEventListener的方式注册事件
   */
  window.addEventListener('load', function () {
    let btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      alert('点了我');
    });
  });

  /**
   * 不用等到图片CSS等加载完就可以
   */
  document.addEventListener('DOMContentLoaded', function () {
    let div = document.querySelector('div');
    div.innerHTML = '333';
    alert(666);
  })


  <button>点我</button>
  <div></div>
    调整窗口大小事件
    window.onresize = function(){};

window.addEventListener('resize',function(){});

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

    注意
    1. 只要窗口大小发生像素变化，就会触发这个事件。
    2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度。
      window.addEventListener('load', function () {
    window.addEventListener('resize', function () {
      console.log('窗口变化了');
      let div = document.querySelector('div');
      // 屏幕的宽度
      let width = window.innerWidth;
      // 屏幕的高度
      let height = window.innerHeight;
      // 当屏幕宽度小于 800 的时候隐藏 div 盒子
      if (width < 800) {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    });
  });

    <div></div>

     div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    2.4 定时器（两种）

    1. window 对象给我们提供了 2 个非常好用的方法-定时器。
    • setTimeout()
    • setInterval()
    setTimeout() 炸弹定时器
    开启定时器：
    window.setTimeout(回调函数,[延迟的毫秒数]);

    setTimeout 这个函数我们称为回调函数callback

    注意

    1. window 可以省略；

    2. 这个函数可以直接写函数，或者写函数名称采用字符串的方式'函数名()' 三种方式。但是第三种方式不推荐;

    3. 延迟毫秒数省略默认是 0，如果写上，必须是毫秒数;

    4. 因为定时器可能有很多，所以进行将定时器赋值给一个标识符。

      // 1. 第一种写法
  setTimeout(function () {
    console.log('bang bang');
  }, 2000);

  // 2. 第二种写法
  function callBack() {
    console.log('炸了');
  }

  setTimeout(callBack, 3000);

  // 3. 第三种写法
  setTimeout('callBack()', 4000);

    普通函数是按照代码顺序直接调用。
    简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
    例如：定时器中的调用函数，事件处理函数，也是回调函数。
    以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

    案例：5秒后关闭广告
    1. 【前端案例】10 - 案例：5秒后关闭 ad - 简书 (jianshu.com)。
    停止定时器
    window.  clearTineout(定时器名称);
    1. clearTimeout方法取消了先前通过调用setTimeout建立的定时器。
    注意

    1. window 可以省略。

    2. 里面的参数就是定时器的标识符。

     let timer = setTimeout(function () {
    console.log('爆炸了');
  }, 3000);

  window.addEventListener('load', function () {
    // 获取按钮
    let btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      // 停止定时器
      clearTimeout(timer);
    });
  });

    <!-- 点击停止定时器 -->
<button>
  点击停止定时器
</button>
    setInterval() 闹钟定时器
    开启定时器
    window.setInterval(回调函数,[间隔的毫秒数]);
    1. setInterval() 方法重复调用一个函数，每个这个间隔时间，就会去调用一次回调函数。
    开启定时器 
     // 每隔指定的时间调用一次
  setInterval(function () {
    console.log('恭喜啊');
  }, 1000)
    案例：倒计时
    1. 【前端案例】11 - 案例：倒计时 - 简书 (jianshu.com)
    停止计时器
    window.clearInterval(定时器名称);
    1. clearInterval() 方法取消了先前调用 setInterval() 建立的定时器。
    <button class="on">开启定时器</button>
<button class="off">关闭定时器</button>

      let on = document.querySelector('.on');
  let off = document.querySelector('.off');
  let timer = null; // 设置一个全局变量接收定时器对象
  on.addEventListener('click', function () {
    // 设置定时器
    timer = setInterval(function () {
      console.log('走起');
    }, 1000);
  });

  off.addEventListener('click', function () {
    clearInterval(timer);
  });

    2.5 this指向问题

    1. this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，一般情况下this 的最终指向的是那个调用它的对象。
    现阶段，我们先了解一下几个this指向

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

    2. 方法调用中谁调用this指向谁;

    3. 构造函数中this指向构造函数的实例。

    <button>点击</button>

    let button = document.querySelector('button');
  // this 指向问题一般情况下this的最终指向的是那个调用它的对象

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

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

  fn();

  setTimeout(function () {
    console.log(this);
  }, 1000);

  // 2. 方法调用谁调用指向谁
  let o = {
    sayHello: function () {
      console.log(this);
    }
  };

  o.sayHello(); // o
  button.addEventListener('click', function () {
    console.log(this);
  });
  // 3. 构造函数中他this指向构造函数的实例
  let obj = new Object(); // 这里的 this 指向的是 obj 这个实例

    2.6 location对象

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

    1. 统一资源定位符（Uniform Resource Locator） 是互联网上标准资源的地址。互联网上的每一个文件都有一个唯一的URL。因为这个属性返回的是一个对象，所以我们将这个属性也成为了 location 对象。

    2. URL的一般语法 ：

    protocol://host[:port]/path/[?query]#fragment
https://www.baidu.com/index.html?name='老王'#锚点
    URL
    location 对象的属性
    location对象的属性

    重点记住：href 和 search属性。

    案例：5秒后跳转页面
    1. 【前端案例】13 - 案例：5秒后跳转页面 - 简书 (jianshu.com)。
    案例：获取地址栏的参数
    1. 补链接。
    location对象的常见方法
    location对象的常见方法 
      let btn = document.querySelector('button');
  btn.addEventListener('click', function () {
    // location.assign('https://www.baidu.com'); // 重定向页面
    // location.reload(true); // 强制刷新
    location.replace('https://www.baidu.com'); // 不记录历史记录
  });

    2.7 navigator对象

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

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

    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 = "";     //电脑
 }

    2.8 history对象

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

    3. JS的执行机制 （重点）

    3.1 JS是单线程的

    1. JavaScript 语言最大的特点就是单线程，也就是说，同一时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致，JavaScript 是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行增删操作，不能同时进行。应该先进行添加操作，再进行删除操作。
    • 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
    • 这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

    3.2 同步任务和异步任务

    1. 单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

    2. 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript脚本创建多个线程，但是子线程完全受主线程控制。于是，JS中出现了同步任务和异步任务。

    同步
    1. 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
    异步
    1. 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

    他们的本质区别就是这条流水线上的执行顺序是不一样的。

    JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）;
    同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
    异步任务指的是：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

    同步任务

    3.3 JS执行机制（事件循环）

    JS的执行机制 JS的执行机制
    代码思考
     console.log('1');

  /**
   * 不点击的话不会在任务队列中出现
   */
  document.addEventListener('click', function () {
    console.log('click');
  });

  console.log('2');

  setTimeout(function () {
    console.log('3');
  }, 3000);

    相关文章

      网友评论

        本文标题：【前端 JavaScript WebAPI】04 - 常用键盘事

        本文链接：https://www.haomeiwen.com/subject/tptvwktx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        es6

        前端开发那些事儿

        JavaScript

        前端

        关于我们|服务条款|联系我们|【前端 JavaScript WebAPI】04 - 常用键盘事|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！