JavaScript 进阶3

JavaScript 进阶3

事件高级

  • 注册事件（绑定事件）

    • 注册事件概述

      • 给元素添加事件，称为注册事件或者绑定事件。

      • 注册事件有两种方式：传统方式和方法监听注册方式

    • addEventListener 事件监听方式

      • eventTarget.addEventListener(type, listener[, useCapture])

      • eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

      • 该方法接收三个参数：

        • type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on

        • listener：事件处理函数，事件发生时，会调用该监听函数

        • useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

    • attachEvent 事件监听方式

      • eventTarget.attachEvent(eventNameWithOn, callback)

      • eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

      • 该方法接收两个参数：

        • eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on

        • callback： 事件处理函数，当目标触发事件时回调函数被调用

      • 注意：IE8 及早期版本支持

      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
      head>
      <body>
          <button>传统注册事件button>
          <button>方法监听注册事件button>
          <button>ie9 attachEventbutton>
          <script>
              var btns = document.querySelectorAll('button');
              // 1. 传统方式注册事件
              btns[0].onclick = function() {
                  alert('hi');
              }
              btns[0].onclick = function() {
                      alert('hao a u');
                  }
                  // 2. 事件侦听注册事件 addEventListener 
                  // (1) 里面的事件类型是字符串 必定加引号 而且不带on
                  // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
              btns[1].addEventListener('click', function() {
                  alert(22);
              })
              btns[1].addEventListener('click', function() {
                      alert(33);
                  })
                  // 3. attachEvent ie9以前的版本支持
              btns[2].attachEvent('onclick', function() {
                  alert(11);
              })
          script>
      body>
      html>
       

    • 注册事件兼容性解决方案 （了解）

      <script>
           function addEventListener(element, eventName, fn) {
                // 判断当前浏览器是否支持 addEventListener 方法
                if (element.addEventListener) {
                  element.addEventListener(eventName, fn);  // 第三个参数 默认是false
                } else if (element.attachEvent) {
                  element.attachEvent('on' + eventName, fn);
                } else {
                  // 相当于 element.onclick = fn;
                  element['on' + eventName] = fn;
           } 
      script>
       

      • 兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器

  • 删除事件（解绑事件）

    • 删除事件的方式

      • 1、传统注册方式

        • eventTarget.onclick = null;

      • 2、方法监听注册方式

        • ①eventTarget.removeEventListener(type, listener[, useCapture]);

        • ②eventTarget.detachEvent(eventNameWithOn, callback);

        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Documenttitle>
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    background-color: pink;
                }
            style>
        head>
        <body>
            <div>1div>
            <div>2div>
            <div>3div>
            <script>
                var divs = document.querySelectorAll('div');
                divs[0].onclick = function() {
                        alert(11);
                        // 1. 传统方式删除事件
                        divs[0].onclick = null;
                    }
                    // 2. removeEventListener 删除事件
                divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        ?
                function fn() {
                    alert(22);
                    divs[1].removeEventListener('click', fn);
                }
                // 3. detachEvent
                divs[2].attachEvent('onclick', fn1);
        ?
                function fn1() {
                    alert(33);
                    divs[2].detachEvent('onclick', fn1);
                }
            script>
        body>
        html>
         

    • 删除事件兼容性解决方案 （了解）

      <script>
           function removeEventListener(element, eventName, fn) {
            // 判断当前浏览器是否支持 removeEventListener 方法
            if (element.removeEventListener) {
              element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
            } else if (element.detachEvent) {
              element.detachEvent('on' + eventName, fn);
            } else {
              element['on' + eventName] = null;
       } 
      script>
       

  • DOM 事件流

    • 事件流描述的是从页面中接收事件的顺序。

    • 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

    • 比如我们给一个div 注册了点击事件：

      • DOM 事件流分为3个阶段：

        • 1、捕获阶段

        • 2、 当前目标阶段

        • 3、冒泡阶段

      • 事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

      • 事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

    • 我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

    • 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

      • 注意

        • 1、JS 代码中只能执行捕获或者冒泡其中的一个阶段。

        • 2、onclick 和 attachEvent 只能得到冒泡阶段。

        • 3、addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

        • 4、实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

        • 5、有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

        • 6、事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。 

      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
          <style>
              .father {
                  overflow: hidden;
                  width: 300px;
                  height: 300px;
                  margin: 100px auto;
                  background-color: pink;
                  text-align: center;
              }
              
              .son {
                  width: 200px;
                  height: 200px;
                  margin: 50px;
                  background-color: purple;
                  line-height: 200px;
                  color: #fff;
              }
          style>
      head>
      ?
      <body>
          <div class="father">
              <div class="son">son盒子div>
          div>
          <script>
              // dom 事件流 三个阶段
              // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
              // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
              // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
              // var son = document.querySelector('.son');
              // son.addEventListener('click', function() {
              //     alert('son');
              // }, true);
              // var father = document.querySelector('.father');
              // father.addEventListener('click', function() {
              //     alert('father');
              // }, true);
              // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
              var son = document.querySelector('.son');
              son.addEventListener('click', function() {
                  alert('son');
              }, false);
              var father = document.querySelector('.father');
              father.addEventListener('click', function() {
                  alert('father');
              }, false);
              document.addEventListener('click', function() {
                  alert('document');
              })
          script>
      body>
      html>
       

  • 事件对象

    • 什么是事件对象

      <script>
            eventTarget.onclick = function(event) {} 
            eventTarget.addEventListener('click', function(event) {}）
            // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
      script>
       

      • 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

      • 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

      • 比如：

        • 1、谁绑定了这个事件。

        • 2、鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

        • 3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

    • 事件对象的使用语法

      <script>
            eventTarget.onclick = function(event) {
               // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
            } 
            eventTarget.addEventListener('click', function(event) {
              // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
            }）
      script>
       

      • 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

      • 当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

    • 事件对象的兼容性方案

      • 事件对象本身的获取存在兼容问题：

        • 1、标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

        • 2、在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

        • 解决: e = e || window.event;

    • 事件对象的常见属性和方法

      • e.target 和 this 的区别：（重要）

        • this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）

        • e.target 是事件触发的元素。

      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
          <style>
              div {
                  width: 100px;
                  height: 100px;
                  background-color: pink;
              }
          style>
      head>
      ?
      <body>
          <div>123div>
          <ul>
              <li>abcli>
              <li>abcli>
              <li>abcli>
          ul>
          <script>
              // 常见事件对象的属性和方法
              // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
              // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
              var div = document.querySelector('div');
              div.addEventListener('click', function(e) {
                  console.log(e.target);
                  console.log(this);
      ?
              })
              var ul = document.querySelector('ul');
              ul.addEventListener('click', function(e) {
                      // 我们给ul 绑定了事件  那么this 就指向ul  
                      console.log(this);
                      console.log(e.currentTarget);
      ?
                      // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                      console.log(e.target);
      ?
                  })
                  // 了解兼容性
                  // div.onclick = function(e) {
                  //     e = e || window.event;
                  //     var target = e.target || e.srcElement;
                  //     console.log(target);
      ?
              // }
              // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
          script>
      body>
      html>
       

    • 阻止默认行为

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
          <style>
      ?
          style>
      head>
      ?
      <body>
          <div>123div>
          <a href="http://www.baidu.com">百度a>
          <form action="http://www.baidu.com">
              <input type="submit" value="提交" name="sub">
          form>
          <script>
              // 常见事件对象的属性和方法
              // 1. 返回事件类型
              var div = document.querySelector('div');
              div.addEventListener('click', fn);
              div.addEventListener('mouseover', fn);
              div.addEventListener('mouseout', fn);
      ?
              function fn(e) {
                  console.log(e.type);
      ?
              }
              // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
              var a = document.querySelector('a');
              a.addEventListener('click', function(e) {
                      e.preventDefault(); //  dom 标准写法
                  })
                  // 3. 传统的注册方式
              a.onclick = function(e) {
                  // 普通浏览器 e.preventDefault();  方法
                  // e.preventDefault();
                  // 低版本浏览器 ie678  returnValue  属性
                  // e.returnValue;
                  // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
                  return false;
                  alert(11);
              }
          script>
      body>
      ?
      html>

  • 阻止事件冒泡

    • 阻止事件冒泡的两种方式

      • 事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

      • 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

    • 阻止事件冒泡

      • 标准写法：利用事件对象里面的 stopPropagation()方法

        • e.stopPropagation()

      • 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

        • e.cancelBubble = true;

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
          <style>
              .father {
                  overflow: hidden;
                  width: 300px;
                  height: 300px;
                  margin: 100px auto;
                  background-color: pink;
                  text-align: center;
              }
              
              .son {
                  width: 200px;
                  height: 200px;
                  margin: 50px;
                  background-color: purple;
                  line-height: 200px;
                  color: #fff;
              }
          style>
      head>
      ?
      <body>
          <div class="father">
              <div class="son">son儿子div>
          div>
          <script>
              // 常见事件对象的属性和方法
              // 阻止冒泡  dom 推荐的标准 stopPropagation() 
              var son = document.querySelector('.son');
              son.addEventListener('click', function(e) {
                  alert('son');
                  e.stopPropagation(); // stop 停止  Propagation 传播
                  e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
              }, false);
      ?
              var father = document.querySelector('.father');
              father.addEventListener('click', function() {
                  alert('father');
              }, false);
              document.addEventListener('click', function() {
                  alert('document');
              })
          script>
      body>
      ?
      html>
       

    • 阻止事件冒泡的兼容性解决方案

      <script>
            if(e && e.stopPropagation){
                e.stopPropagation();
            }else{
                window.event.cancelBubble = true;
            }
      script>
       

  • 事件委托（代理、委派）

    • 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：

      • 咱们班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

      • 解决方案： 快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

      • 优势： 快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任。

    • 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。程序中也有如此场景：

      <script>
            <ul>
                  <li>知否知否，应该有弹框在手</li>
                  <li>知否知否，应该有弹框在手</li>
                  <li>知否知否，应该有弹框在手</li>
                  <li>知否知否，应该有弹框在手</li>
                  <li>知否知否，应该有弹框在手</li>
            </ul>
      script>
       

      • 点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

    • 事件委托

      • 事件委托也称为事件代理， 在 jQuery 里面称为事件委派。

      • 事件委托的原理（重要）

        • 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

      • 以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

      • 事件委托的作用

        • 我们只操作了一次 DOM ，提高了程序的性能。

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
      head>
      ?
      <body>
          <ul>
              <li>知否知否，点我应有弹框在手！li>
              <li>知否知否，点我应有弹框在手！li>
              <li>知否知否，点我应有弹框在手！li>
              <li>知否知否，点我应有弹框在手！li>
              <li>知否知否，点我应有弹框在手！li>
          ul>
          <script>
              // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
              var ul = document.querySelector('ul');
              ul.addEventListener('click', function(e) {
                  // alert('知否知否，点我应有弹框在手！');
                  // e.target 这个可以得到我们点击的对象
                  e.target.style.backgroundColor = 'pink';
      ?
      ?
              })
          script>
      body>
      ?
      html>
       

  • 常用的鼠标事件

    • 常用的鼠标事件

      • 1、禁止鼠标右键菜单

        • contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

          <script>
              document.addEventListener('contextmenu', function(e) {
              e.preventDefault();
              })
          script>
           

        • 禁止鼠标选中（selectstart 开始选中）

          <script>
              document.addEventListener('selectstart', function(e) {
              e.preventDefault();
             })
          script>
           

    • 鼠标事件对象

      • event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

        <html lang="en">
        ?
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Documenttitle>
            <style>
                body {
                    height: 3000px;
                }
            style>
        head>
        ?
        <body>
            <script>
                // 鼠标事件对象 MouseEvent
                document.addEventListener('click', function(e) {
                    // 1. client 鼠标在可视区的x和y坐标
                    console.log(e.clientX);
                    console.log(e.clientY);
                    console.log('---------------------');
        ?
                    // 2. page 鼠标在页面文档的x和y坐标
                    console.log(e.pageX);
                    console.log(e.pageY);
                    console.log('---------------------');
        ?
                    // 3. screen 鼠标在电脑屏幕的x和y坐标
                    console.log(e.screenX);
                    console.log(e.screenY);
        ?
                })
            script>
        body>
        ?
        html>
         

  • 常用的键盘事件

    • 常用键盘事件

      • 事件除了使用鼠标触发，还可以使用键盘触发。

      • 注意：

        • 1、如果使用addEventListener不需要加 on

        • 2、onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。

        • 3、三个事件的执行顺序是： keydown -- keypress --- keyup

        <html lang="en">
        ?
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Documenttitle>
        head>
        ?
        <body>
            <script>
                // 常用的键盘事件
                //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
            script>
        body>
        ?
        html>
         

    • 键盘事件对象

      • 注意：

        • onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

        • 在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）

        • Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

        <html lang="en">
        ?
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Documenttitle>
        head>
        ?
        <body>
            <script>
                // 键盘事件对象中的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>
        body>
        ?
        html>
         

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

    • ①快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的文字

    • ②同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容

    • ③如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子

    • ④注意： keydown 和 keypress 在文本框里面的特点： 他们两个事件触发的时候，文字还没有落入文本框中。

    • ⑤keyup事件触发的时候， 文字已经落入文本框里面了

    • ⑥当我们失去焦点，就隐藏这个con盒子

    • ⑦当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
              
              .search {
                  position: relative;
                  width: 178px;
                  margin: 100px;
              }
              
              .con {
                  display: none;
                  position: absolute;
                  top: -40px;
                  width: 171px;
                  border: 1px solid rgba(0, 0, 0, .2);
                  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
                  padding: 5px 0;
                  font-size: 18px;
                  line-height: 20px;
                  color: #333;
              }
              
              .con::before {
                  content: '';
                  width: 0;
                  height: 0;
                  position: absolute;
                  top: 28px;
                  left: 18px;
                  border: 8px solid #000;
                  border-style: solid dashed dashed;
                  border-color: #fff transparent transparent;
              }
          style>
      head>
      ?
      <body>
          <div class="search">
              <div class="con">123div>
              <input type="text" placeholder="请输入您的快递单号" class="jd">
          div>
          <script>
              // 快递单号输入内容时， 上面的大号字体盒子（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';
                  }
              })
          script>
      body>
       

  • 案例：倒计时效果

    • 案例分析

      • ①这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）

      • ②三个黑色盒子里面分别存放时分秒

      • ③三个黑色盒子利用innerHTML 放入计算的小时分钟秒数

      • ④第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

      • ⑤最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

    <html lang="en">
    ?
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <style>
            div {
                margin: 200px;
            }
            
            span {
                display: inline-block;
                width: 40px;
                height: 40px;
                background-color: #333;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
            }
        style>
    head>
    ?
    <body>
        <div>
            <span class="hour">1span>
            <span class="minute">2span>
            <span class="second">3span>
        div>
        <script>
            // 1. 获取元素 
            var hour = document.querySelector('.hour'); // 小时的黑色盒子
            var minute = document.querySelector('.minute'); // 分钟的黑色盒子
            var second = document.querySelector('.second'); // 秒数的黑色盒子
            var inputTime = +new Date('2022-2-9 18:00:00'); // 返回的是用户输入时间总的毫秒数
            countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
            // 2. 开启定时器
            setInterval(countDown, 1000);
    ?
            function countDown() {
                // 此处+号是为了将object类型转换为number类型
                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;
            }
        script>
    body>
    ?
    html
     

  • 停止 setInterval()定时器

    • window.clearInterval(intervalID);

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

    • 注意：

      • 1、window 可以省略。

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

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
      head>
      ?
      <body>
          手机号码： <input type="number"> <button>发送button>
          
          <script>
              var btn = document.querySelector('button');
              var time = 3;
              btn.addEventListener('click', function(){
                  btn.disabled = true;
                  var timer = setInterval(function(){
                      if(time == 0) {
                          clearInterval(timer);
                          btn.disabled = false;
                          btn.innerHTML = '发送';
                          time = 3;
                      } else {
                          btn.innerHTML = '还剩下'+time+'s';
                          time--;
                      }
                  }, 1000);
              })
          script>
      ?
      body>
      ?
      html>
       

  • this

    • this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

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

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

      • 2、方法调用中谁调用this指向谁

      • 3、构造函数中this指向构造函数的实例

      <html lang="en">
      ?
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Documenttitle>
      head>
      ?
      <body>
          <button>点击button>
          <script>
              // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
      ?
              // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
              console.log(this);  //Window
      ?
              function fn() {
                  console.log(this);  //Window
      ?
              }
              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();
          script>
      body>
      ?
      html>
       

JS 执行机制

  • JS 是单线程

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

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

  • 问题1：

     console.log(1);
    

     setTimeout(function () {
    

    ?
    

         console.log(3);
    

    ?
    

     }, 1000);
    

    

     console.log(2);
    

    


     结果：1 2 3
    






 



    • 

  • 

    问题2：
    









     console.log(1);
    


    

     setTimeout(function () {
    

    ?
    

         console.log(3);
    

    ?
    

     }, 0);
    

    

     console.log(2);
    


    ?
    


     结果：1 2 3
    





 



    • 

  • 

    同步和异步
    

      

    • 

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

      • 

    • 

      同步
      

        

      • 

        前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
        

        • 

      

      • 

    • 

      异步
      

        

      • 

        你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
        

        • 

      

      • 

    • 

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

      • 

    • 

      同步任务
      

        

      • 

        同步任务都在主线程上执行，形成一个执行栈。
        

        

        • 

      

      • 

    • 

      异步任务
      

        

      • 

        JS 的异步是通过回调函数实现的。
        

        • 

      • 

        一般而言，异步任务有以下三种类型:
        

          

        • 

          1、普通事件，如 click、resize 等
          

          • 

        • 

          2、资源加载，如 load、error 等
          

          • 

        • 

          3、定时器，包括 setInterval、setTimeout 等
          

          • 

        

        • 

      • 

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

        

        • 

      

      • 

    

    • 

  • 

    JS 执行机制
    

      

    • 

      1、先执行执行栈中的同步任务。
      

      • 

    • 

      2、异步任务（回调函数）放入任务队列中。
      

      • 

    • 

      3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
      

      

      • 

    









     console.log(1);
    


     document.onclick = function() {
    

       console.log('click');
    

     }
    

     console.log(2);
    

     setTimeout(function() {
    

       console.log(3)
    


     }, 3000)
    


    没点击鼠标：1 2 3
    

    3s之前点击鼠标1次：1 2 click 3
    

    3s之后点击鼠标1次： 1 2 3 click
    


    点了几次鼠标就几个click
    






 



      

    • 

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

      

      • 

    

    • 



location 对象


    

  • 

    什么是 location 对象
    

      

    • 

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

      • 

    

    • 

  • 

    URL
    

      

    • 

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

      • 

    • 

      URL 的一般语法格式为：
      









       protocol://host[:port]/path/[?query]#fragment
      


      ?
      

       http://www.itcast.cn/index.html?name=andy&age=18#link
      





 



      

      • 

    

    • 

  • 

    location 对象的属性
    

    

      

    • 

      重点记住： href 和 search
      









      


      <html lang="en">
      

      ?
      

      <head>
      

          <meta charset="UTF-8">
      

          <meta name="viewport" content="width=device-width, initial-scale=1.0">
      

          <meta http-equiv="X-UA-Compatible" content="ie=edge">
      

          <title>Documenttitle>
      

      head>
      

      ?
      

      <body>
      

          <button>点击button>
      

          <div>div>
      

          <script>
      

              var btn = document.querySelector('button');
      

              var div = document.querySelector('div');
      

              btn.addEventListener('click', function() {
      

                  // console.log(location.href);
      

                  location.href = 'http://www.itcast.cn';
      

              })
      

              var timer = 5;
      

              setInterval(function() {
      

                  if (timer == 0) {
      

                      location.href = 'http://www.itcast.cn';
      

                  } else {
      

                      div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
      

                      timer--;
      

                  }
      

      ?
      

              }, 1000);
      


          script>
      


      body>
      

      ?
      

      html>
      





 



      • 

    

    • 

  • 

    location 对象的方法
    

    









    


    <html lang="en">
    

    ?
    

    <head>
    

        <meta charset="UTF-8">
    

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

        <title>Documenttitle>
    

    head>
    

    ?
    

    <body>
    

        <button>点击button>
    

        <script>
    

            var btn = document.querySelector('button');
    

            btn.addEventListener('click', function() {
    

                // 记录浏览历史，所以可以实现后退功能
    

                // location.assign('http://www.itcast.cn');
    

                // 不记录浏览历史，所以不可以实现后退功能
    

                // location.replace('http://www.itcast.cn');
    

                location.reload(true);
    

            })
    


        script>
    


    body>
    

    ?
    

    html>
    





 



    • 



navigator 对象


    

  • 

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

    • 

  • 

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









    <script>
    


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


     }
    



    script>
    






 



    • 



history 对象


    

  • 

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

    









    index.html
    


    

    <html lang="en">
    

    ?
    

    <head>
    

        <meta charset="UTF-8">
    

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

        <title>Documenttitle>
    

    head>
    

    ?
    

    <body>
    

        <a href="list.html">点击我去往列表页a>
    

        <button>前进button>
    

        <script>
    

            var btn = document.querySelector('button');
    

            btn.addEventListener('click', function() {
    

                // history.forward();
    

                history.go(1);
    

            })
    

        script>
    

    body>
    

    ?
    

    html>
    

    ?
    

    ?
    

    list.html
    

    

    <html lang="en">
    

    ?
    

    <head>
    

        <meta charset="UTF-8">
    

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

        <title>Documenttitle>
    

    head>
    

    ?
    

    <body>
    

        <a href="index.html">点击我去往首页a>
    

        <button>后退button>
    

        <script>
    

            var btn = document.querySelector('button');
    

            btn.addEventListener('click', function() {
    

                // history.back();
    


                history.go(-1);
    


            })
    

        script>
    

    body>
    

    ?
    

    html>
    





 



    • 

  • 

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

    

    • 


						  
					  

						
							


						

							
							
			WebAPIs							
						



						

						
						


						

						
					

					

					
					

						
相关

						

				
						
			

																
								

										
day06 - Web APIs

									
									

								 

        

								

							
							
            
            
            
                                    
           
  			
						

					

					
				


				

														
					
					

					
									

					
									   
标签