事件监听
语法
元素对象.addEventListener('事件类型',要执行的函数)
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<div class="box2">33</div>
<script>
// 1.获取事件源
const box1 = document.querySelector('.box1')
// 关闭大盒子
const box = document.querySelector('.box')
// 2.事件监听
box1.addEventListener('click', function () {
box.style.display='none' //必须加引号 否则当成变量了
// 该空间隐藏后直接消失
// document.querySelector('.box').classList.remove('box')
// 这种不可以内容还存在 ，只是除去了css的配置
})
</script>
事件监听三要素
事件源：获取dom元素
let btn=document.querySelector('button')
完成事件监听分成3个步骤：
获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行
大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。
随机点名案例
<div class="box">
<h3>随机问答</h3>
<span style="float: left;">名字是:</span>
<div class="qs">这里显示姓名</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
</div>
<script>
const arr = ['刘备', '关羽', '曹操', '赵云', '黄忠', '张飞', '马超']
// 定义定时器id
let timeId = 0
// 随机数要全局变量
let random = 0
// 1.开始按钮模块
const start = document.querySelector('.start')
// 获取qs模块
const qs = document.querySelector('.qs')
start.addEventListener('click', function () {
// qs.innerHTML=arr[random] //不要键引号，已经是字符串
// 将定时器赋值给timeId
timeId = setInterval(function () {
random = parseInt(Math.random() * arr.length)
//随机数写在定时器内，否则会导致数据错乱【会出现只获取一次数据的效果】
// console.log(arr[random]);
qs.innerHTML = arr[random]
// console.log(arr[random]);
}, 100)
// 如果数组里面还有一个值，还需要抽取吗？ 不需要，让两个按钮禁用
if (arr.length === 1) {
// start.disabled=true
// end.disabled = true
// 合并
start.disabled = end.disabled = true
}
})
// 关闭按钮模块
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(timeId)
// 可以删除当前抽取的元素
arr.splice(random, 1)//需要让random成为全局变量
// 则start定时器定义的const random 中const需要删除 否则算是重新定义
console.log(arr);
})
</script>
事件监听版本
DOM L0
事件源.on事件=function（）{}
DOM L2
事件源.addEventListener(事件，事件处理函数)
区别
on方式会被覆盖，但是addEventListener方式可以绑定多次
on只能做冒泡，不能做捕获，addEventListener都可以。

// 绑定多个元素的时候，就不可以直接通过元素对象.addEventListener(‘事件类型’,要执行的函数)直接获取到元素，因此需要用到for循环
// 轮播图内的li可以通过这个绑定，主要原因是因为，li写在了绑定的左右按钮事件内，没有单独写出来，否则需要该方法【多个相同的标签，不使用于绑定一个标签 任何进行函数操作，如果是当前这种情况下，绑定一个标签除非使用循环，否则没办法直接访问当前的这个 除非根li一样 是通过访问其他标签（左右按钮） 然后在内部实现li的效果 】
事件处理程序
addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。
<script>
// 双击事件类型
btn.addEventListener('dblclick', function () {
console.log('等待事件被触发...')
const text = document.querySelector('.text')
// 改变 p 标签的文字颜色
text.style.color = 'red'
// 改变 p 标签的文本内容
text.style.fontSize = '20px'
})
</script>
结论：【事件处理程序】决定了事件触发后应该执行的逻辑。
事件类型
将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。
鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。
`mouseenter 监听鼠标是否移入 DOM 元素
<body>
<h3>鼠标事件</h3>
<p>监听与鼠标相关的操作</p>
<hr>
<div class="box"></div>
<script>
// 需要事件监听的 DOM 元素
const box = document.querySelector('.box');
// 监听鼠标是移入当前 DOM 元素
box.addEventListener('mouseenter', function () {
// 修改文本内容
this.innerText = '鼠标移入了...';
// 修改光标的风格
this.style.cursor = 'move';
})
</script>
</body>
`mouseleave 监听鼠标是否移出 DOM 元素
<body>
<h3>鼠标事件</h3>
<p>监听与鼠标相关的操作</p>
<hr>
<div class="box"></div>
<script>
// 需要事件监听的 DOM 元素
const box = document.querySelector('.box');
// 监听鼠标是移出当前 DOM 元素
box.addEventListener('mouseleave', function () {
// 修改文本内容
this.innerText = '鼠标移出了...';
})
</script>
</body>
抽取相同的代码 构建函数【实现复用】
const prev = document.querySelector('.toggle .prev')
let timeId1 = 0
prev.addEventListener('mouseenter', function () {
timeId1 = setInterval(function () {
m--
m = m <= 0 ? sliderData.length - 1 : m
// 渲染
// img.src = sliderData[m].url
// p.innerHTML = sliderData[m].title
// // li
// document.querySelector('.active').classList.remove('active')
// const li = document.querySelector(`.slider-indicator li:nth-child(${m + 1})`) //数是正常顺序的，只是操作反向操作
// li.classList.add('active')
// footer.style.backgroundColor = sliderData[m].color
// 调用函数
toggle()
}, 300)
})
prev.addEventListener('mouseleave', function () {
clearInterval(timeId1)
})
// 左侧按钮和右侧按钮渲染的相同 复用
// 声明一个渲染的函数作为复用
function toggle() {
img.src = sliderData[m].url
p.innerHTML = sliderData[m].title
// li
document.querySelector('.active').classList.remove('active')
const li = document.querySelector(`.slider-indicator li:nth-child(${m + 1})`) //数是正常顺序的，只是操作反向操作
li.classList.add('active')
footer.style.backgroundColor = sliderData[m].color
}
鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
自动播放
setInterval(function(){
// 利用js自动调用点击事件
next.click() //一定加小括号【调用函数】 自动播放必须是click mouseenter不能执行
},1000)
注意#
// 定时器作用 点击之后自动播放 之前用的mouseover，但是不适用于自动播放
// 改成点击适用于自动播放，但是不能使用定时器否则与自动播放冲突 【最后呈现效果是点击一次动一次】
// timeId1 = setInterval(function () {
键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
焦点事件
focus 获得焦点
blur 失去焦点
const input =document.querySelector('[type=search]')
// 属性选择器
//
const ul =document.querySelector('.result-list')
// console.log(input);
// 监听事件 焦点
input.addEventListener('focus',function(){
ul.style.display='block'
// 通过获取焦点添加删除类 效果显示更方便
// 否则写在两个监听事件内 就需要两个代码[效果相同 哪个顺手用哪个]
// input.classList.add('search')
input.style.border='1px solid orange'
})
input.addEventListener('blur',function(){
ul.style.display='none'
//
// input.classList.remove('search')
input.style.border = '1px solid #e0e0e0'
})
<!-- maxlength="200"限制了字数 -->
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
文本框输入事件
input
// 2.用户输入文本事件【检测是否输入文本】input
input.addEventListener('input',function(){
// console.log(123);
console.log(input.value);
})
属性选择器的写法：
标签名[属性] { 声明即样式 }
除去input边框 浏览器默认的外边框效果
outline: none;
原效果：

添加代码后效果：

事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
<body>
<h3>事件对象</h3>
<p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
<hr>
<div class="box"></div>
<script>
// 获取 .box 元素
const box = document.querySelector('.box')
// 添加事件监听
box.addEventListener('click', function (e) {
console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');
// 事件回调函数的第1个参数即所谓的事件对象
console.log(e)
})
</script>
</body>

注意
函数内的第一个参数是事件对象，之后的参数就是变量
如下就是第二个参数【即变量的效果】

1.什么是事件对象
官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。
简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。
接下来简单看一下事件对象中包含了哪些有用的信息：
ev.type 当前事件的类型
ev.clientX/Y 光标相对浏览器窗口的位置
ev.offsetX/Y 光标相于当前 DOM 元素的位置
注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

环境对象
能够分析判断函数运行在不同环境中 this 所指代的对象。
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
<script>
// 声明函数
function sayHi() {
// this 是一个变量
console.log(this);
}
// 声明一个对象
let user = {
name: '张三',
sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
}
let person = {
name: '李四',
sayHi: sayHi
}
// 直接调用
sayHi() // window
window.sayHi() // window
// 做为对象方法调用
user.sayHi()// user
person.sayHi()// person
</script>
结论：
this 本质上是一个变量，数据类型为对象
函数的调用方式不同 this 变量的值也不同
【谁调用 this 就是谁】是判断 this 值的粗略规则
函数直接调用时实际上 window.sayHi() 所以 this 的值为 window
在非严格模式下，this指向的是window，事件监听下指向的就是调用者，箭头函数没有this，方法的箭头函数this指向全局window对象。vue里面的this指向实例对象。
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
<script>
// 声明 foo 函数
function foo(arg) {
console.log(arg);
}
// 普通的值做为参数
foo(10);
foo('hello world!');
foo(['html', 'css', 'javascript']);
/*函数 A：*/
function bar() {
console.log('函数也能当参数...');
}
// 函数也可以做为参数！！！！
foo(bar);
</script>
函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！
我们回顾一下间歇函数 setInterval
<script>
function fn() {
console.log('我是回调函数...');
}
// 调用定时器
setInterval(fn, 1000);
</script>
fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
<script>
// 调用定时器，匿名函数做为参数
setInterval(function () {
console.log('我是回调函数...');
}, 1000);
</script>
结论：
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见
注意：回调函数不要加小括号
setInterval(函数名，间隔时间) 不要加小括号 加上小括号 立即调用了函数 但是，此处需要的是重复回调
案例tab切换
<script>
// a 模块制作 要给5个链接绑定鼠标经过事件
const as = document.querySelectorAll('.tab-nav a')
// 绑定多个元素的时候，就不可以直接通过元素对象.addEventListener('事件类型',要执行的函数)直接获取到元素，因此需要用到for循环
// 轮播图内的li可以通过这个绑定，主要原因是因为，li写在了绑定的左右按钮事件内，没有单独写出来，否则需要该方法【多个相同的标签，不使用于绑定一个标签 任何进行函数操作，如果是当前这种情况下，绑定一个标签除非使用循环，否则没办法直接访问当前的这个 除非根li一样 是通过访问其他标签（左右按钮） 然后在内部实现li的效果
// 但是当前这种情况，是直接访问li的不会用到别的标签】
// console.log(as);
for (let i = 0; i < as.length; i++) {
// console.log(as[i]);
as[i].addEventListener('mouseenter', function () {
console.log('鼠标经过');
// 排他思想
// 干掉别人 移除类active
// 我登基 我添加类active
// 必须写在函数里面，每次重新获取有类active的属性 并删除该属性
document.querySelector('.tab-nav .active').classList.remove('active')
// 当前鼠标经过的标签 增加类active this指代当前的这个a 模块
this.classList.add('active')
})
}
</script>
效果：

匿名函数
var backMonthDay = function (year) {
var day = 28
// 能被400整除，或者能被4整除但不能被100整除的都是闰年，其余的年份均为平年。
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
day = 29
}
return day
}
var year1 = backMonthDay(2010)
console.log(year1);
var year2 = backMonthDay(2000)
console.log(year2);
CSS中Border(边框)
justify-content: flex-end;**flex-end：**用于对齐容器末端的弹性项目。

outline: none;
/*去掉默认的外边框效果*/
border-color: transparent;
resize: none;
/* 去除文本域的右下角的线 */
2.边框样式
border-style的值
none 默认无边框
dotted 定义一个点线框
dashed 定义一个虚线框
solid 定义实线边界
double 定义两个边界,两个边界的宽度和boder-width的值相同
groove 定义3D沟槽边界,效果取决于边界的颜色值
rigde 定义3D脊边界,效果取决于边界的颜色值
inset 定义一个3D的嵌入边框,效果取决于边界的颜色值
outset 定义一个3D的突出边框,效果取决于边界的颜色值
3.边框-单独设置个边
border-top-style:
border-bottom-style:
border-right-style:
border-left-style:
在后面设置自己想要的样式.
4.透明边框
border-color:transparent;
————————————————
原文链接：https://blog.csdn.net/weixin_43555093/article/details/88657340
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
