JS 事件

1. 事件对象 Event
   - 当事件的响应函数被触发的时候，浏览器每次都会将一个事件对象作为实参传递进响应函数
   - 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下等
   1. onmousemove
      - 该事件将会在鼠标在元素中移动时被触发
      1. 属性(event的属性）
         1. clientX
            - 可以获取鼠标指针的可见水平坐标
         2. clientY
            - 可以获取鼠标指针的可见垂直坐标
         3. div的偏移量，是相对于整个页面的
         4. pageX
         5. pageY
            - 上面两个属性是可以获取鼠标相对于当前页面的坐标
   2. onwheel
      - 该事件会在鼠标在元素中滚轮滚动的时候触发
      1. event.wheelDelta
         - 判断鼠标滚轮滚动的方向
      2. event.detail(在火狐浏览器中使用这个属性）
         - 获取滚轮的方向
      3. 当滚轮滚动的时候，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
         - return false
         使用addEventListner()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event来取消默认行为
         - event.preventDefault()
   3. 事件的冒泡
      - 冒泡：事件的向上传导，当后代元素上的事件被触发的时候，如果满足条件，祖先的事件也会被触发
      - 在开发中大部分冒泡都是有用的，如果不希望事件发生冒泡，可以通过事件对象来取消冒泡
      1. canlcelBubble（属性）
         event.cancelBubble=true; --这个东西可以取消冒泡
   4. 事件的委派
      - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发的时候，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
      - 事件委派是利用了冒泡，通过减少代码，从而提升了效率
      1. event.client
         - 返回触发事件的对象
   5. 事件的绑定
      1. 使用对象.事件 = 函数的形式绑定响应函数
         - 只能同时为一个元素的一个事件绑定一个函数，如果同时绑定了多个函数，则后面的函数会覆盖前面的函数
      2. 如果想要触发多个函数，可以使用如下的响应函数的绑定方法
         1. addEventListener()
            - 通过这个方法也可以为元素绑定函数
            - 参数：
            1. 事件的字符串，不要on
            2. 回调函数
            3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
   6. 事件的传播
      - 微软公司的理解：事件应该是由内向外传播，也就是当事件触发的时候，应该先触发当前元素上的事件，然后再向当前元素上的元素进行传播
      - 网景公司的理解：事件应该是由外向内传播，应该先触发当前元素的最外层祖先元素的事件
      1. W3C综合了两个公司的方案，将事件传播分成了三个阶段
         1. 捕获阶段
            - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的补货，但是默认此时不会触发事件
         2. 目标阶段
            - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
         3. 冒泡阶段
            - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
            
            - 如果希望在捕获阶段就开始执行事件，可以在addEventListener()方法的第三个参数设置成true 
   7. 键盘的事件
      1. onkeydown
         - 键盘被按下
         - 第一次和第二次按下之间会有比较长的反应间隔，这是浏览器为了防止误触发生的
      2. onkeyup
         - 按键被松开
      3. 键盘事件一般都会绑定给一些可以获取到焦点的对象
      4. return false 会使事件没办法响应，所以如果想要用户没办法输入某些东西的时候可以使用这个
      5. event.key
         - 可以返回被按下的按键的字符串
         1. altKey
         2. ctrlKey
         3. shiftKey
            - 这三个可以用来判断alt ctrl和shift是否被按下，如果按下则返回true，否则返回false
      6. event.keyCode
         - 这个会返回按键的编码
         - 数字是从48-57
2. BOM
   - 浏览器对象模型
   - BOM可以使我们通过JS来操作浏览器
   - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
   - BOM对象
   1. Window
      - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
   2. Navigator
      - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
      1. 一般我们只会使用userAgent来判断浏览器的信息
         - 是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器含有不同的userAgent
   3. Location
      - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
      1. 如果直接打印location，可以获取到当前的完整的路径
      2. 如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会跳转到这个页面，并且生成相应的路径
      3. assign（）
         - 跳转到其他的页面，作用和直接修改location一样
         - 需要一个路径的字符串作为参数
      4. reload（）
         - 用于重新加载当前页面，作用和刷新按钮一样
         - 如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
      5. replace（）
         - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成历史记录
   4. History
      - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
      - 由于隐私的原因，该对象不能获取到具体的历史记录
      1. length
         - 属性，可以获取到当前访问的链接数量
      2. back（）
         - 可以用来回退到上一个页面
      3. forward()
         - 可以跳转到下一个页面，作用和浏览器的前进按钮一样
      4. go（）
         - 可以用来跳转到指定的页面
         - 需要一个整数作为参数
               1:表示向前跳转一个页面
               2:表示向前跳转两个页面
   5. Screen
      - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
3. 定时器
   - 如果希望一段程序，可以每见隔一段时间执行一次，可以使用定时调用
   1. setInterval()
      - 定时调用
      - 可以将一个函数，每隔一段时间执行一次
      - 参数：
          1.回调函数，该函数会每隔一段时间被调用一次
          2.每次调用间隔的事件，单位是毫秒
      - 返回值：
      返回一个Number类型的数据
      这个数字用来作为定时器的唯一标识
   2. clearInterval()
      - 用来关闭一个定时器
      - 参数：
             1.需要关闭的定时器的标识(定时器的名字或者定时器的号码也行）
   3. 如果一个按钮绑定了开启定时器的东西，点击多次就会开启多个定时器，这就导致图片的切换速度过快，并且我们只能关闭最后一次开启的定时器，所以可以在按钮的内容最顶部先关闭之前的所有定时器
   4. 延时定时器
      - 一个函数不马上执行，而是隔一段时间之后在执行
      
      延时调用和定时调用的区别：定时调用会执行很多次，而延时调用只会执行一次
      - setTimeout()
      用来设置一个延时调用定时器，参数和定时调用的一样
      - clearTimeout()
      用来关闭一个延时调用
4. 类的操作
   1. 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样执行的性能较差
   2. 修改box的class属性

       <style>
              .b1 {
                  width: 100px;
                  height: 100px;
                  background-color: red;
              }
      
              .b2 {
                  width: 200px;
                  height: 200px;
                  background-color: yellow;
              }
          </style>
          <script>
              window.onload = function () {
                  var box1 = document.getElementById("box1");
                  var btn01 = document.getElementById("btn01");
                  btn01.onclick = function () {
                      box1.className = "b2";
                  }
              }
          </script>
      </head>
      
      <body>
          <button id="btn01">11111</button>
          <div id="box1" class="b1"></div>
      
      </body>

      这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染一次页面

   3. 如果想要两个类进行叠加
      - 定义一个函数，用来向一个元素中添加指定的class属性

5. JSON

   1. JS中的对象只有JS自己认识，其他的语言都不认识

   2. JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互

   3. JSON的格式和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号

   4. JSON对象分类

      1. 对象{

      2. 数组[]

   5. JSON中允许的值

      1. 字符串

      2. 数值

      3. 布尔值

      4. null

      5. 对象

      6. 数组

   6. 将JSON字符串转换为JS中的对象，提供了一个工具类，就叫JSON
      - 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

      1. JSON.parse();
         - 可以讲JSON字符串转换为js对象
         - 需要一个JSON字符串作为参数，会将该字符串转换为JS对象

      2. JSON.stringify()
         -可以将一个JS对象转换为JSON字符串

      3. eval()
         - 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
         - 如果使用这个函数的字符串中含有{}，它会将这个{}当成是代码块，则需要在字符串前后各加一个（）

      4. 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理