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" onm ouseover="mouseoverEvent()"
onm ouseout="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.value
let 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代表操作浏览器
页面的放大缩小 ， 页面的滚动， 浏览器加载情况
*/
//监听浏览器加载完毕 方式1
window.onload = function(){
}
//方式2
window.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)
}
标签：function,console,log,js,let,事件,document,JavaWeb From： https://blog.csdn.net/rxdasd123456/article/details/140336393