js事件
在前端页面中，js程序大多数是由事件来驱动的，当触发某些事件的时候，可以使用js负责响应。
js事件由三部分组成:
事件源——》指的是被触发的对象;
事件类型——》如何触发的事件，如:鼠标单击、双击、键盘操作等;
事件处理程序——》触发事件以后，使用一个函数来处理。因此事件步骤:
1. 获取事件源对象;
2. 注册事件;
3. 添加处理程序。
事件类型
事件的注册方式
1.静态注册 在html标签中注册 （如果元素是通过js创建的 ，就没法这样注册）
2.动态注册 在js代码中注册
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;background-color: aqua;}</style></head><body><!-- onclick 单击事件 --><button onclick="clickEvent()" ondblclick="dblclickEvent()">我是按钮</button><input id="phone-input" onfocus="focusEvent()" onblur="blurEvent()"><span id="check-text" style="display: none;">格式正确</span><div class="box" onmouseover="mouseoverEvent()"onmouseout="mouseoutEvent()"></div></body>
<script>//入口函数//可以方式js代码 先于html代码加载 导致 元素获取失败的问题window.onload = function () {console.log('加载完成了')console.log(document.querySelector('button'))}function clickEvent() {console.log('单击')}function dblclickEvent() {console.log('双击')}function focusEvent() {console.log('获取到焦点')console.log('请输入手机号')}function blurEvent() {//当失去焦点的时候验证手机号正确性console.log('开始验证手机号');let phoneInput = document.getElementById('phone-input')let phone = phoneInput.valuelet text = document.getElementById('check-text');text.style.display = 'inline';//验证手机号let reg = /^1[3456789]\d{9}$/if (reg.test(phone)) {text.innerText = '格式正确'text.style.color = '#00acff'} else {text.innerText = '格式有误'text.style.color = 'red'}}function mouseoverEvent(){console.log('鼠标划入')}function mouseoutEvent(){console.log('鼠标划出')}
</script></html> // false代表 事件冒泡 从下往上 默认的// true代表 事件捕获， 从上往下 document.getElementById('one').addEventListener('click', function () {console.log('one被点击了')},false)document.getElementById('two').addEventListener('click', function () {console.log('two被点击了')},false)document.getElementById('three').addEventListener('click', function () {console.log('three被点击了')},false)
option
false的话 就是事件冒泡了 从子元素到父元素
true的话 就是事件捕获 从父到子！true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。
Event事件对象
事件对象e，是event的简称。当一个事件被触发时候，这个事件的有关数据都会被存储在一个事件对象e里面，这个对象e有许多固定方法提供给我们查看里面各种数据。
Bom操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 3000px;}.top-layout{width: 100%;height: 80px;background-color: blue;display: none;position: fixed;top: 0;}.goTop-btn{width: 50px;height: 50px;background-color: blue;border-radius: 50%;position: fixed;right: 100px;bottom: 100px;display: none;}</style>
</head>
<body><div class="top-layout"></div><div class="goTop-btn"></div></body><script>/*bom代表操作浏览器页面的放大缩小 ， 页面的滚动， 浏览器加载情况*///监听浏览器加载完毕 方式1window.onload = function(){}//方式2window.addEventListener('load',function(){})//监听浏览器大小的改变window.addEventListener('resize',function(e){// console.log(window.innerWidth,window.innerHeight)})//获取 顶部栏目 和 按钮let topBtn= document.querySelector('.goTop-btn')let topLayout= document.querySelector('.top-layout');//监听浏览器滚动条滚动window.addEventListener('scroll',function(e){//获取当前滚动条的滑动距离let top = document.documentElement.scrollTop;if(top>1000){topLayout.style.display='block'topBtn.style.display='block'}else{topLayout.style.display='none'topBtn.style.display='none'}})//点击按钮 回到顶部topBtn.addEventListener('click',function(){window.scrollTo({top:0,behavior:"smooth"})})
</script>
</html>定时器
//定时器 1 setTimeout// function 延迟执行的函数,延迟的时间 let timeOut = setTimeout(function(){console.log(123)// 清除定时器// clearTimeout(this);},2000);function clearTime(){clearTimeout(timeOut);} // 循环执行的定时器：轮播图，倒计时，循环请求let setTime= setInterval(function(){console.log("我被执行了")},1000)function clearTime(){clearInterval(setTime)}
