JavaScript基础大全（五）

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 391 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #html5

本文深入解析前端开发中的各类事件，如鼠标、键盘、触摸等，详细讲解了事件对象及其属性，如鼠标坐标、键盘事件顺序。同时，探讨了BOM、DOM的构成与操作，包括页面加载事件、窗口大小调整、定时器使用及JS执行机制。最后，对比了offset、style和client系列属性，解析了元素位置、大小和滚动距离的获取方法。

文章目录

常用鼠标事件

在这里插入图片描述

案例：禁止选中文字和禁止右键菜单

在这里插入图片描述

<body>
   我是一段不愿意分享的文字
   <script>
       // 1. contextmenu 我们可以禁用右键菜单
       document.addEventListener('contextmenu', function(e) {
               e.preventDefault();
      })
       // 2. 禁止选中文字 selectstart
       document.addEventListener('selectstart', function(e) {
           e.preventDefault();
      })
   </script>
</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>

常用的键盘事件

键盘事件

在这里插入图片描述

 <script>
       // 常用的键盘事件
       //1. keyup 按键弹起的时候触发
       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>

键盘事件对象

在这里插入图片描述

使用keyCode属性判断用户按下哪个键

   <script>
       // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
       document.addEventListener('keyup', function(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>

BOM

什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是
window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape
浏览器标准的一部分。

BOM的构成

BOM 比 DOM 更大，它包含 DOM。
在这里插入图片描述

顶级对象window

在这里插入图片描述

window对象的常见事件

页面（窗口）加载事件（2种）

第1种

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

第2种

在这里插入图片描述

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

<script>
       window.addEventListener('load', function() {
           var btn = document.querySelector('button');
           btn.addEventListener('click', function() {
               alert('点击我');
          })
      })
       window.addEventListener('load', function() {
           alert(22);
      })
       document.addEventListener('DOMContentLoaded', function() {
           alert(33);
      })
   </script>

调整窗口大小事件

在这里插入图片描述

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

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

 <script>
       // 注册页面加载事件
       window.addEventListener('load', function() {
           var div = document.querySelector('div');
      // 注册调整窗口大小事件
           window.addEventListener('resize', function() {
               // window.innerWidth 获取窗口大小
               console.log('变化了');
               if (window.innerWidth <= 800) {
                   div.style.display = 'none';
              } else {
                   div.style.display = 'block';
              }
          })
      })
   </script>
   <div></div>

定时器（两种）

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

setTimeout()
setInterval()

setTimeout() 炸弹定时器

开启定时器

普通函数是按照代码顺序直接调用。

简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

<script>
       // 回调函数是一个匿名函数
        setTimeout(function() {
            console.log('时间到了');

        }, 2000);
       function callback() {
           console.log('爆炸了');
      }
// 回调函数是一个有名函数
       var timer1 = setTimeout(callback, 3000);
       var timer2 = setTimeout(callback, 5000);
   </script>

停止定时器

<button>点击停止定时器</button>
   <script>
       var btn = document.querySelector('button');
// 开启定时器
       var timer = setTimeout(function() {
           console.log('爆炸了');
      }, 5000);
// 给按钮注册单击事件
       btn.addEventListener('click', function() {
           // 停止定时器
           clearTimeout(timer);
      })
   </script>

setInterval() 闹钟定时器

开启定时器

 <script>
       // 1. setInterval
       setInterval(function() {
           console.log('继续输出');
      }, 1000);
   </script>

this指向问题

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

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

  <button>点击</button>
   <script>
       // 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.addEventListener('click', function() {
               console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
          })
       // 3. 构造函数中this指向构造函数的实例
       function Fun() {
           console.log(this); // this 指向的是fun 实例对象
      }
       var fun = new Fun();
   </script>

JS执行机制

以下代码执行的结果是什么？

console.log(1);

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

console.log(2);
以下代码执行的结果是什么？
console.log(1);

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

console.log(2);

JS 是单线程

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

同步任务和异步任务

单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

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

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是：
在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：
不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

JS执行机制（事件循环）

在这里插入图片描述

location对象

什么是 location 对象

在这里插入图片描述

location 对象的属性

在这里插入图片描述

location对象的常见方法

在这里插入图片描述

<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>

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

history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
在这里插入图片描述
history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到

offset 概述

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

触摸事件对象（TouchEvent）

TouchEvent
是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。触摸事件对象重点我们看三个常见对象列表：

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

案例：移动端拖动元素

touchstart、touchmove、touchend可以实现拖动元素
但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：

（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置
（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子
（3）离开手指 touchend:
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
style
style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
在这里插入图片描述

淘宝 flexible.js 源码分析

立即执行函数 (function(){})() 或者 (function(){}())
主要作用：创建一个独立的作用域。避免了命名冲突问题
下面三种情况都会刷新页面都会触发 load 事件。

1.a标签的超链接
2.F5或者刷新按钮（强制刷新）
3.前进后退按钮
但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件
注意这个事件给window添加。

元素滚动 scroll 系列

scroll 概述

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
在这里插入图片描述

页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() {
   return {
     left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
     top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  };
}
使用的时候  getScroll().left

三大系列总结

在这里插入图片描述
他们主要用法：
1.offset系列经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得