JavaScript基础大全（五）

最新推荐文章于 2024-08-27 15:59:21 发布

wangxiaochaocccc

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量323

点赞数

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/wangxiaochaoc/article/details/105285196

版权

文章目录

常用鼠标事件

在这里插入图片描述

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

在这里插入图片描述

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

mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

wangxiaochaocccc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础大全（五）

文章目录常用鼠标事件案例：禁止选中文字和禁止右键菜单鼠标事件对象获取鼠标在页面的坐标常用的键盘事件键盘事件键盘事件对象BOM什么是BOMBOM的构成顶级对象windowwindow对象的常见事件页面（窗口）加载事件（2种）第1种第2种调整窗口大小事件定时器（两种）setTimeout() 炸弹定时器setInterval() 闹钟定时器this指向问题JS执行机制JS 是单线程同步任务和异步任务J...
复制链接

扫一扫