1.事件监听
语法：对象.addEventListener（‘事件类型’，要执行函数）
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>.box1 {height: 100px;width: 150px;background-color: #ccc;position: relative;margin: 100px auto;}.box2 {position: absolute;top: 10px;right: 10px;color: #fff;background-color: bisque;text-align: center;width: 15px;height: 15px;font-size: 15px;cursor: pointer;}</style></head><body><div class="box1"><div class="box2">×</div></div><script>const b1 = document.querySelector('.box1')const b2 = document.querySelector('.box2')b2.addEventListener('click', function () {b1.style.display = 'none'})</script>
</body></html>随机点名案例
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>h2 {text-align: center;}.box {width: 300px;margin: 0 auto;font-size: 20px;display: flex;}.name {color: orange;}.btns {text-align: center;}.btns button {width: 80px;height: 30px;margin: 20px 70px;}</style></head><body><h2>随机点名</h2><div class="box"><span>选中姓名：</span><div class="name">显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']const name = document.querySelector('.name')const start = document.querySelector('.start')const end = document.querySelector('.end')let n = 0let ran = 0start.addEventListener('click', function () {n = setInterval(function () {ran = Math.floor(Math.random() * arr.length)name.innerHTML = arr[ran]}, 35)if (arr.length === 1) {clearInterval(n)start.disabled = end.disabled = true}})end.addEventListener('click', function () {clearInterval(n)arr.splice(ran, 1)})</script></body></html>
2.事件类型
鼠标事件：click，mouseenter（鼠标经过），mouseleave（鼠标离开）
焦点事件：focus，blur（失去焦点）
键盘事件：keydown，keyup
文本事件：input
案例，完整的轮播图
鼠标放上，自动播放停止，鼠标离开，继续自动播放，点击下一页，往后播放
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-footer .toggle {position: absolute;right: 10px;top: 10px;}.slider-footer .toggle button {width: 28px;height: 28px;border: none;appearance: none;border-radius: 5px;cursor: pointer;background-color: rgba(255, 255, 255, .1);color: #fff;}.toggle button:hover {background-color: rgba(255, 255, 255, .2);}.slider-indicator {list-style: none;margin: 0;padding: 0;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background-color: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="./06-素材/images/slider01.jpg" alt=""></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="pre"><</button><button class="next">></button></div></div></div><script>const sliderData = [{ url: './06-素材/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './06-素材/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './06-素材/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './06-素材/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './06-素材/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './06-素材/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './06-素材/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './06-素材/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const bg = document.querySelector('.slider-footer')const next=document.querySelector('.next')const pre=document.querySelector('.pre')const box=document.querySelector('.slider')let i=0next.addEventListener('click',function(){i++i=i>=sliderData.length?0:ichange()})pre.addEventListener('click',function(){i--i=i<0?sliderData.length-1:ichange()})function change(){img.src=sliderData[i].urlbg.style.backgroundColor=sliderData[i].colorp.innerHTML=sliderData[i].titledocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')}let n=setInterval(function(){next.click()},1000)box.addEventListener('mouseenter',function(){clearInterval(n)})box.addEventListener('mouseleave',function(){clearInterval(n)n=setInterval(function(){mext.click()},1000)})</script>
</body></html>焦点事件案例
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}.mi{position: relative;width: 223px;margin: 100px auto;}.mi input{width: 223px;height: 48px;padding: 0 10px;outline: none;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;}.mi .search{border: 1px solid #ff6700;}.result-list{display: none;list-style: none;position: absolute;top:48px;left:0;width: 223px;border: 1px solid #ff6700;background: #fff;border-top:0 ;}.result-list a{display: block;padding: 6px 15px;text-decoration: none;color:#424242;font-size:12px;}.result-list a:hover{background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li></ul></div><script>const input=document.querySelector('[type=search]')const ul=document.querySelector('.result-list')input.addEventListener('focus',function(){ul.style.display='block'input.classList.add('search')})input.addEventListener('blur',function(){ul.style.display='none'input.classList.remove('search')})</script>
</body></html>案例： 评论发布，记录输入字数
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>.wrapper{max-width: 800px;min-width: 400px;display: flex;justify-content: flex-end;}.avatar{width: 48px;height: 48px;background: url('./06-素材(1)/images/avatar.jpg') no-repeat center /cover;border-radius: 50%;margin-right: 20px;overflow: hidden;}.wrapper textarea{flex:1;outline: none;border-radius: 4px;border-color: transparent;background: #f5f5f5;resize: none;padding: 10px;height: 30px;transition: all .5s;}.wrapper textarea:focus{height: 40px;border-color: #e4e4e4;background: #fff;}.wrapper button{background: #00aeec;color: #fff;border: none;width: 70px;border-radius: 4px;margin-left: 10px;cursor: pointer;}.wrapper .total{position: absolute;margin-right: 80px;color:#999;margin-top: 5px;opacity: 0;transition: all .5s;}</style></head><body><div class="wrapper"><i class="avatar"></i><textarea id="txt" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button >发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><script>const txt=document.querySelector('#txt')const total=document.querySelector('.total')txt.addEventListener('focus',function(){total.style.opacity=1})txt.addEventListener('blur',function(){total.style.opacity=0})txt.addEventListener('input',function(){total.innerHTML=`${txt.value.length}/200字`})</script>
</body></html>
3.事件对象
如何获取：在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
事件对象属性：type：获取当前事件类型。clientX/clientY获取光标相对于浏览器可见窗口左上角位置。offsetX/offsetY获取光标相对于当前DOM元素左上角的位置。key：用户按下键盘键的值
str.trim（）去除左右空格
案例：按回车键发送评论
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>.wrapper {max-width: 800px;min-width: 400px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;background: url('./06-素材(1)/images/avatar.jpg') no-repeat center /cover;border-radius: 50%;margin-right: 20px;overflow: hidden;}.wrapper textarea {flex: 1;outline: none;border-radius: 4px;border-color: transparent;background: #f5f5f5;resize: none;padding: 10px;height: 30px;transition: all .5s;}.wrapper textarea:focus {height: 40px;border-color: #e4e4e4;background: #fff;}.wrapper button {background: #00aeec;color: #fff;border: none;width: 70px;border-radius: 4px;margin-left: 10px;cursor: pointer;}.wrapper .total {position: absolute;margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all .5s;}.list{max-width: 800px;min-width: 400px;display: flex;margin-top: 20px;}.list .item{width: 100%;display: flex;}.info{flex:1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.info p{margin: 0;}.name{color: #FB7299;font-size: 14px;font-weight: bold;}.txt{color: #333;padding: 10px 0;}.time{color: #999;font-size: 12px;}</style></head><body><div class="wrapper"><i class="avatar"></i><textarea id="txt" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="txt">大家都辛苦啦，感谢各位大大的努力</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const txt = document.querySelector('#txt')const total = document.querySelector('.total')const comment=document.querySelector('.item')const content=document.querySelector('.info .txt')txt.addEventListener('focus', function () {total.style.opacity = 1})txt.addEventListener('blur', function () {total.style.opacity = 0})txt.addEventListener('input', function () {total.innerHTML = `${txt.value.length}/200字`})txt.addEventListener('keyup',function(e){if(e.key==='Enter'){if(txt.value.trim()){comment.style.display='block'content.innerHTML=txt.value}txt.value=''total.innerHTML='0/200字'}})</script>
</body></html>4.环境对象
指的是内部特殊的变量this，代表当前函数运行时所处的环境
谁调用，this就是谁
5.回调函数
函数A作为参数传递给函数B，我们称A是回调函数
6.综合案例-tab切换
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>练习</title><style>*{margin:0;padding: 0;}.tab{width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav{width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3{font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul{list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li{margin: 0 20px;}.tab-nav ul li a{text-decoration: none;color:#333;border-bottom: 2px solid transparent;font-size: 14px;}.tab-nav ul li a.active{border-color: #e1251b;color:#e1251b;}.tab-content{padding: 0 16px;}.item{display: none;}.item.active{display: block;}</style></head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./06-素材(1)/images/tab00.png" alt=""></div> <div class="item "><img src="./06-素材(1)/images/tab01.png" alt=""></div> <div class="item "><img src="./06-素材(1)/images/tab02.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab03.png" alt=""></div><div class="item "><img src="./06-素材(1)/images/tab04.png" alt=""></div></div></div><script>const tab=document.querySelectorAll('.tab-nav a')for(let i=0;i<tab.length;i++){tab[i].addEventListener('mouseenter',function(){document.querySelector('.tab-nav .active').classList.remove('active')this.classList.add('active')document.querySelector('.tab-content .active').classList.remove('active')document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')})}</script>
</body></html>
)
