JavaScript事件执行机制
2021/11/20 14:40:08
本文主要是介绍JavaScript事件执行机制，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JS事件执行机制
一、JS事件知识
1.1注册事件（2种方式）
给元素添加事件，称为注册事件或绑定事件
注册事件有两种方式：传统方式和监听注册方式
传统注册方式：
利用on开头的事件onclick
<button onclick="alert("hi~")"></button>
btn.onclick=function(){}
-
特点：注册事件的唯一性
-
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
监听注册方式
-
w3c标准 推荐方式
-
addEventListenner()他是一个方法
-
IE9之前的IE不支持此方法，可使用attachEvebt()代替
-
特点：同一个元素同一个事件可以注册多个监听器
-
按注册顺序依次执行
1.2事件监听
addEventListenner()事件监听（IE9以后支持）
eventTarget.addEventListener(type,listenner[,useCaoture])
该方法接受三个参数：
type：事件类型字符串，比如click、mouseover，注意不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。
例：
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');//通过选择器来选择元素
// 1. 传统方式注册事件
btns[0].onclick = function () {
alert('hi');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function () {
alert(22);
})
btns[1].addEventListener('click', function () {
alert(33);
})
</script>
1.3常用鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发.. |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
1.4事件对象
event是事件对象
event.target是返回触发事件的对象
1.5鼠标事件对象
（1）基础语法
event事件对象是事件相关的一系列信息的集合
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
例：获取鼠标在页面的坐标
<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>
1.6常用的键盘事件
1.1.1键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| obkeypress | 某个键盘按键被按下时触发 注：不能识别功能键比如：ctrl shift 等 |
注意：
1.如果使用addEventListener不需要加on
2.onkeypress和前面两个的区别：不能识别功能键，比如左右箭头，ctrl、shift等
3.三个事件的执行顺序是：keydown--keypress--keyup
例：
<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>
二、BOM
2.1什么是BOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
DOM
-
文档对象类型
-
DOM就是把文档当作一个对象来写
-
DOM的顶级对象是document
-
DOM主要学习的是操作页面元素
-
DOM是W3C标准规范
BOM
-
浏览器对象类型
-
把浏览器当做一个对象来看待
-
BOM顶级对象是window
-
BOM学习的是浏览器窗口交互的一些对象
-
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
2.2BOM的构成
BOM比DOM更大，它包含DOM
（1）定时器（两种 ）
-
setTimeout（）
-
setInerval（）
setTimeout（）炸弹定时器
开启定时器
window.setTimeout(调用函数，[延时的毫秒数]);
setTimeout（）这个调用函数也称为回调函数callback
注意：
1.window可以省略
2.这个调用函数可以直接写函数，或者函数名或者采取字符串‘函数名（）’-----不推荐 三种方式
3.延迟的毫秒数省略默认是0，如果写，必须是毫秒
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
普通函数是按照代码顺序直接调用。
简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。
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>
案例：5秒后关闭广告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
// 获取要操作的元素
var ad = document.querySelector('.ad');
// 开启定时器
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
停止定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
注意：
1.window可以省略
2.里面的参数就是定时器的标识符。
例：
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');//监听事件触发
// 开启定时器
var timer = setTimeout(function () {
console.log('爆炸了');
}, 5000);
// 给按钮注册单击事件
btn.addEventListener('click', function () {//监听事件触发
// 停止定时器
clearTimeout(timer);
})
</script>
setInterval() 闹钟定时器
开启定时器
window.setInterval(回调函数，[间隔的毫秒数]);
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
注意：
1.window可以省略
2.这个调用函数可以直接写函数，或者函数名或者采取字符串‘函数名()’三种形式
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4.因为定时器可能有很多，所以我们经常给定时器一个赋值一个标识符
5.第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次
例：
<script>
// 1. setInterval
setInterval(function () {
console.log('继续输出');
}, 1000);
</script>
案例：倒计时
<style>
* {
margin: 0;
padding: 0;
}
div{
background-color: red;
width: 300px;
height: 100px;
margin: 0 auto;
}
div>span {
display: inline-block;
width: 50px;
height: 50px;
background-color: #000;
color: white;
font-size: 25px;
text-align: center;
line-height: 50px;
margin-left: 15px;
margin-top: 10px;
}
div>p{
color: white;
text-align: center;
font-size: 24px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<p>本场距离结束还剩</p>
<span class="day">1</span>
<span class="hour">2</span>
<span class="minute">3</span>
<span class="second">4</span>
</div>
<script>
//获取元素
var day = document.querySelector('.day');//获取天数的盒子
var hour = document.querySelector('.hour');//获取小时的盒子
var minute = document.querySelector('.minute');//获取分钟的盒子
var second = document.querySelector('.second');//获取秒数的盒子
//创建一个新的变量存放用户返回的总毫秒数
var inputTime = new Date('2021-10-07 12:00:00');
time();//先调用一次防止 页面空白
setInterval(time, 1000);//开启定时器
function time() {
var nowTime = new Date();//返回当前时间的总毫秒数
var times = (inputTime - nowTime) / 1000;//返回剩余时间的总秒数
var d = parseInt(times / 60 / 60 / 24);//返回剩余的天数
if (d < 10) {
d = "0" + d;
}
day.innerHTML = d;//把获取的天数赋值给元素day
var h = parseInt(times / 60 / 60 % 24);//返回剩余的小时
if (h < 10) {
h = "0" + h;
}
hour.innerHTML = h;//把获取的小时赋值给元素hour
var m = parseInt(times / 60 % 60);//返回剩余的分钟
if (m < 10) {
m = "0" + m;
}
minute.innerHTML = m;//把获取的分钟赋值给元素minute
var s = parseInt(times % 60);//返回剩余的秒数
if (s < 10) {
s = "0" + s;
}
second.innerHTML = s;//把获取的秒数赋值给元素second
}
</script>
停止定时器
window.clearInterval(intervalID);
clearInterval()方法取消了先前调用setInterval()建立的定时器
注意：
1.window可以省略
2.里面的参数就是定时器的标识符
案例：发送短信倒计时
点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。
例：
手机号码： <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 = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
});
</script>
(2). location对象
什么是 location 对象
window对象给我们提供了location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL
统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么去处理
URL的一般语法格式为：
protocol://host[:port]/path[/?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议 常用的http,ftp,maito等 |
| host | 主机（域名） |
| port | 端口号 可选，省略时使用方法方案的默认端口 如http的默认端口为80 |
| path | 路径 由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式通过&符号分隔开来 |
| fragment | 片段 #后面内容 常见于链接 锚点 |
location 对象的属性
| location对象属性 | 返回值 |
|---|---|
| location.herf | 获取或者设置 整个URL |
| location.host | 返回主机 （域名） |
| location.port | 返回端口号 如果未写返回----空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见于链接 锚点 |
href和search是重点
案例：5分钟自动跳转页面
思路：1.利用定时器做倒计时效果
2.时间到了，就跳转页面。使用location.href
<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>
三、JS执行机制
以下代码执行的结果是什么？
<script>
console.log(1);
setTimeout(function () {
console.log(3);
}, 1000);
console.log(2);
</script>
以下代码执行的结果是什么？
<script>
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
</script>
3.1 JS 是单线程
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。
3.2 同步任务和异步任务
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
同步任务都在主线程上执行，形成一个执行栈
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
JS的异步是通过回调函数实现的
一般而言。异步任务有三种类型：
1.普通事件，如click、resize等
2.资源加载，如load、error等
3.定时器，包括setInerval、seTimeout等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）
3.3 JS执行机制（事件循环）
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等状态，进入执行栈，开始执行
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为（事件循环）
3.4案例
<script>
console.log(1);
document.onclick = function() {
console.log('click');
}
setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);
</script>
这篇关于JavaScript事件执行机制的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-06数据结构和算法面试题详解与实战
- 2024-11-06数据结构与算法面试题详解及练习
- 2024-11-06网络请求面试题详解及实战技巧
- 2024-11-06数据结构和算法面试真题详解及备考指南
- 2024-11-06数据结构与算法面试真题解析与练习指南
- 2024-11-06网络请求面试真题详解及实战攻略
- 2024-11-06数据结构和算法大厂面试真题详解与实战
- 2024-11-06数据结构与算法大厂面试真题详解及入门攻略
- 2024-11-06网络请求大厂面试真题详解及应对策略
- 2024-11-06TS大厂面试真题解析与实战指南
