0
0

前端学习--JS入门(5) 事件监听/事件类型/事件对象

一、事件监听

事件是系统运行时发生的动作或者发生的事情

1.1 事件监听

  1. 元素对象.addEventListener('事件类型',要执行的函数)

** 三要素：**

事件源--获取被触发的dom元素

事件类型--触发方式（比如click/mouseover）

事件调用函数--触发了做什么事

案例-随机点名

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>随机</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .box{
  14.             width: 500px;
  15.             height: 300px;
  16.             margin: 50px auto;
  17.             background-color: rgba(255,192,203,0.4);
  18.             border: 1px dotted #333;
  19.             border-radius: 10px;
  20.         }
  21.         h2{
  22.             margin-top: 20px;
  23.             text-align: center;
  24.         }
  25.         .txt span{
  26.             margin-top: 50px;
  27.             display: inline-block;
  28.             font-size: 18px;
  29.             padding-left: 40px;
  30.         }
  31.         .btn{
  32.             margin-top: 100px;
  33.             margin-left: 250px;
  34.             transform: translate(-50%,0);
  35.         }
  36.         .btn button{
  37.             display: inline-block;
  38.             width: 100px;
  39.             height: 30px;
  40.             margin-right: 20px;
  41.             background-color: deepskyblue;
  42.             font-weight: 600;
  43.             text-align: center;
  44.             line-height: 30px;
  45.             font-size: 18px;
  46.             color: #fff;
  47.             border-radius: 3px;
  48.             border: none;
  49.         }
  50.         .btn button:hover{
  51.             background-color: dodgerblue;
  52.             cursor: pointer;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <div class="box">
  59.         <h2>随机点名</h2>
  60.         <div class="txt">
  61.             <span>名字是：</span>
  62.             <span class="name"></span>
  63.         </div>
  64.         <div class="btn">
  65.             <button class="start">开始</button>
  66.             <button class="end">停止</button>
  67.         </div>
  68.     </div>
  69.     <script>
  70.         const arr = ['马超','黄忠','赵云','关羽','张飞','曹操','项羽','程咬金']
  71.         const start = document.querySelector('.start')
  72.         const end = document.querySelector('.end')
  73.         let timeId = 0
  74.         // start.addEventListener('click',function(){
  75.         //     const random = parseInt(Math.random()*arr.length)
  76.         //     const name = document.querySelector('.name')
  77.         //     name.innerHTML = arr[random]
  78.         // })
  79.         start.addEventListener('click',function(){
  80.             timeId = setInterval(function(){
  81.             const random = parseInt(Math.random()*arr.length)
  82.             const name = document.querySelector('.name')
  83.             name.innerHTML = arr[random]
  84.         },200)
  85.         })
  86.         end.addEventListener('click',function(){
  87.             clearInterval(timeId)
  88.         })
  89.     </script>
  90. </body>
  91. </html>

1.2 事件监听版本

  1. //DOM L0
  2. 事件源.on事件 = function(){}
  4. //DOM L2
  5. 事件源.addEventListener(事件, 事件处理函数)
  7. //on的方式多次写入被覆盖，add可以绑定多次拥有更多特性

二、事件类型

2.1 鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

终极版轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>轮播图点击切换</title>
  9.   <style>
  10.     * {
  11.       box-sizing: border-box;
  12.     }
  14.     .slider {
  15.       width: 560px;
  16.       height: 400px;
  17.       overflow: hidden;
  18.     }
  20.     .slider-wrapper {
  21.       width: 100%;
  22.       height: 320px;
  23.     }
  25.     .slider-wrapper img {
  26.       width: 100%;
  27.       height: 100%;
  28.       display: block;
  29.       /* transition: all 1s; */
  30.     }
  32.     .slider-footer {
  33.       height: 80px;
  34.       background-color: rgb(100, 67, 68);
  35.       padding: 12px 12px 0 12px;
  36.       position: relative;
  37.     }
  39.     .slider-footer .toggle {
  40.       position: absolute;
  41.       right: 0;
  42.       top: 12px;
  43.       display: flex;
  44.     }
  46.     .slider-footer .toggle button {
  47.       margin-right: 12px;
  48.       width: 28px;
  49.       height: 28px;
  50.       appearance: none;
  51.       border: none;
  52.       background: rgba(255, 255, 255, 0.1);
  53.       color: #fff;
  54.       border-radius: 4px;
  55.       cursor: pointer;
  56.     }
  58.     .slider-footer .toggle button:hover {
  59.       background: rgba(255, 255, 255, 0.2);
  60.     }
  62.     .slider-footer p {
  63.       margin: 0;
  64.       color: #fff;
  65.       font-size: 18px;
  66.       margin-bottom: 10px;
  67.     }
  69.     .slider-indicator {
  70.       margin: 0;
  71.       padding: 0;
  72.       list-style: none;
  73.       display: flex;
  74.       align-items: center;
  75.     }
  77.     .slider-indicator li {
  78.       width: 8px;
  79.       height: 8px;
  80.       margin: 4px;
  81.       border-radius: 50%;
  82.       background: #fff;
  83.       opacity: 0.4;
  84.       cursor: pointer;
  85.     }
  87.     .slider-indicator li.active {
  88.       width: 12px;
  89.       height: 12px;
  90.       opacity: 1;
  91.     }
  92.   </style>
  93. </head>
  95. <body>
  96.   <div class="slider">
  97.     <div class="slider-wrapper">
  98.       <img src="./image/slider01.jpg" alt="" />
  99.     </div>
  100.     <div class="slider-footer">
  101.       <p>对人类来说会不会太超前了？</p>
  102.       <ul class="slider-indicator">
  103.         <li class="active"></li>
  104.         <li></li>
  105.         <li></li>
  106.         <li></li>
  107.         <li></li>
  108.         <li></li>
  109.         <li></li>
  110.         <li></li>
  111.       </ul>
  112.       <div class="toggle">
  113.         <button class="prev">&lt;</button>
  114.         <button class="next">&gt;</button>
  115.       </div>
  116.     </div>
  117.   </div>
  118.   <script>
  119.     // 1. 初始数据
  120.     const sliderData = [
  121.       { url: './image/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
  122.       { url: './image/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
  123.       { url: './image/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
  124.       { url: './image/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
  125.       { url: './image/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
  126.       { url: './image/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
  127.       { url: './image/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
  128.       { url: './image/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
  129.     ]
  131.     const img = document.querySelector('.slider-wrapper img')
  132.     const p = document.querySelector('.slider-footer p')
  133.     const footer = document.querySelector('.slider-footer')
  134.     let i = 0 //控制播放的图片顺序
  136.     //1 右侧按钮业务
  137.     const next = document.querySelector('.next')
  138.     next.addEventListener('click',function(){
  139.       i++
  140.       if(i >= 8)i = 0
  141.       toggle()
  142.     })
  144.     //2 左侧按钮业务
  145.     const prev = document.querySelector('.prev')
  146.     prev.addEventListener('click',function(){
  147.       i--
  148.       if(i < 0)i = i + sliderData.length  
  149.       toggle()
  150.     })
  152.     function toggle(){
  153.       img.src = sliderData[i].url
  154.       p.innerHTML = sliderData[i].title
  155.       footer.style.backgoundColor = sliderData[i].color
  156.       document.querySelector('.slider-indicator .active').classList.remove('active')
  157.       document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
  158.     }
  160.     //3 自动播放
  161.     let timeId = setInterval(function(){
  162.       //利用js自动调用点击事件
  163.       next.click()
  164.     },2000)
  166.     //4 鼠标经过大盒子 停止定时器 
  167.     const slider = document.querySelector('.slider')
  168.     slider.addEventListener('mouseenter',function(){
  169.       clearInterval(timeId)
  170.     })
  172.     //5 鼠标离开 继续播放
  173.     slider.addEventListener('mouseleave',function(){
  174.       clearInterval(timeId)
  175.       timeId = setInterval(function(){
  176.         //利用js自动调用点击事件
  177.         next.click()
  178.       },2000)
  179.     })
  180.   </script>
  181. </body>
  183. </html>

2.2 焦点事件-表单获得光标

focus 获得焦点

blur 失去焦点

小米搜索框

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         ul {
  18.             list-style: none;
  19.         }
  21.         .mi {
  22.             position: relative;
  23.             width: 223px;
  24.             margin: 100px auto;
  25.         }
  27.         .mi input {
  28.             width: 223px;
  29.             height: 48px;
  30.             padding: 0 10px;
  31.             font-size: 14px;
  32.             line-height: 48px;
  33.             border: 1px solid #e0e0e0;
  34.             outline: none;
  35.         }
  37.         .mi .search {
  38.             border: 1px solid #ff6700;
  39.         }
  41.         .result-list {
  42.             display: none;
  43.             position: absolute;
  44.             left: 0;
  45.             top: 48px;
  46.             width: 223px;
  47.             border: 1px solid #ff6700;
  48.             border-top: 0;
  49.             background: #fff;
  50.         }
  52.         .result-list a {
  53.             display: block;
  54.             padding: 6px 15px;
  55.             font-size: 12px;
  56.             color: #424242;
  57.             text-decoration: none;
  58.         }
  60.         .result-list a:hover {
  61.             background-color: #eee;
  62.         }
  63.     </style>
  65. </head>
  67. <body>
  68.     <div class="mi">
  69.         <input type="search" placeholder="小米笔记本">
  70.         <ul class="result-list">
  71.             <li><a href="#">全部商品</a></li>
  72.             <li><a href="#">小米11</a></li>
  73.             <li><a href="#">小米10S</a></li>
  74.             <li><a href="#">小米笔记本</a></li>
  75.             <li><a href="#">小米手机</a></li>
  76.             <li><a href="#">黑鲨4</a></li>
  77.             <li><a href="#">空调</a></li>
  78.         </ul>
  79.     </div>
  80.     <script>
  81.         const input = document.querySelector('[type=search]')
  82.         const ul = document.querySelector('.result-list')
  83.         input.addEventListener('focus',function(){
  84.             ul.style.display = 'block'
  85.             input.classList.add('search')
  86.         })
  87.         input.addEventListener('blur',function(){
  88.             ul.style.display = 'none'
  89.             input.classList.remove('search')
  90.         })
  91.     </script>
  92. </body>
  94. </html>

2.3 键盘事件

keydown键盘按下触发

keyup 键盘抬起触发

2.4 文本事件

input 用户输入触发

  1. const tx = document.querySelector('#tx')
  2. const total = document.querySelector('.total')
  3. tx.addEventListener('focus',function(){
  4.    total.style.opacity = 1
  5. })
  6. tx.addEventListener('blur',function(){
  7.    total.style.opacity = 0
  8. })
  9. tx,addEventListener('input',function(){
  10.     total.innerHTML = `${tx.value.length}/200字`
  11. })

三、事件对象

包含事件触发时相关信息的对象，比如用户按下哪个键、鼠标点击哪个元素

3.1 获取事件对象

  1. //事件绑定的回调函数的第一个参数就是事件对象
  2. //e就是事件对象
  3. 元素.addEventListener('click',function(e){
  5. })

3.2 事件对象常用属性

type获取当前的事件类型clientX/clientY获取光标相对于浏览器左上角的位置offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下键盘键的值

案例-评论发布

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>评论回车发布</title>
  9.   <style>
  10.     .wrapper {
  11.       min-width: 400px;
  12.       max-width: 800px;
  13.       display: flex;
  14.       justify-content: flex-end;
  15.     }
  17.     .avatar {
  18.       width: 48px;
  19.       height: 48px;
  20.       border-radius: 50%;
  21.       overflow: hidden;
  22.       background: url(./images/avatar.jpg) no-repeat center / cover;
  23.       margin-right: 20px;
  24.     }
  26.     .wrapper textarea {
  27.       outline: none;
  28.       border-color: transparent;
  29.       resize: none;
  30.       background: #f5f5f5;
  31.       border-radius: 4px;
  32.       flex: 1;
  33.       padding: 10px;
  34.       transition: all 0.5s;
  35.       height: 30px;
  36.     }
  38.     .wrapper textarea:focus {
  39.       border-color: #e4e4e4;
  40.       background: #fff;
  41.       height: 50px;
  42.     }
  44.     .wrapper button {
  45.       background: #00aeec;
  46.       color: #fff;
  47.       border: none;
  48.       border-radius: 4px;
  49.       margin-left: 10px;
  50.       width: 70px;
  51.       cursor: pointer;
  52.     }
  54.     .wrapper .total {
  55.       margin-right: 80px;
  56.       color: #999;
  57.       margin-top: 5px;
  58.       opacity: 0;
  59.       transition: all 0.5s;
  60.     }
  62.     .list {
  63.       min-width: 400px;
  64.       max-width: 800px;
  65.       display: flex;
  66.     }
  68.     .list .item {
  69.       width: 100%;
  70.       display: flex;
  71.     }
  73.     .list .item .info {
  74.       flex: 1;
  75.       border-bottom: 1px dashed #e4e4e4;
  76.       padding-bottom: 10px;
  77.     }
  79.     .list .item p {
  80.       margin: 0;
  81.     }
  83.     .list .item .name {
  84.       color: #FB7299;
  85.       font-size: 14px;
  86.       font-weight: bold;
  87.     }
  89.     .list .item .text {
  90.       color: #333;
  91.       padding: 10px 0;
  92.     }
  94.     .list .item .time {
  95.       color: #999;
  96.       font-size: 12px;
  97.     }
  98.   </style>
  99. </head>
  101. <body>
  102.   <div class="wrapper">
  103.     <i class="avatar"></i>
  104.     <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
  105.     <button>发布</button>
  106.   </div>
  107.   <div class="wrapper">
  108.     <span class="total">0/200字</span>
  109.   </div>
  110.   <div class="list">
  111.     <div class="item" style="display: none;">
  112.       <i class="avatar"></i>
  113.       <div class="info">
  114.         <p class="name">清风徐来</p>
  115.         <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
  116.         <p class="time">2022-10-10 20:29:21</p>
  117.       </div>
  118.     </div>
  119.   </div>
  120.   <script>
  121.     const tx = document.querySelector('#tx')
  122.     const total = document.querySelector('.total')
  123.     const item = document.querySelector('.item')
  124.     const text = document.querySelector('.text')
  125.     const bt = document.querySelector('.wrapper button')
  126.     tx.addEventListener('focus',function(){
  127.       total.style.opacity = 1
  128.     })
  129.     tx.addEventListener('blur',function(){
  130.       total.style.opacity = 0
  131.     })
  132.     tx,addEventListener('input',function(){
  133.       total.innerHTML = `${tx.value.length}/200字`
  134.     })
  135.     function addComment(){
  136.       //如果用户输入的不是纯空格
  137.       //trim()去除字符串左右的空格
  138.       if(tx.value.trim()!==''){
  139.         item.style.display = 'block'
  140.         text.innerHTML = tx.value
  141.       }
  142.       //清空文本域
  143.       tx.value = ''
  144.       total.innerHTML = `0/200字`
  145.     }
  147.     //按下回车发布评论
  148.     tx.addEventListener('keyup',function(e){
  149.       if(e.key === 'Enter'){
  150.         addComment()
  151.       }
  152.     })
  153.     bt.addEventListener('click',function(){
  154.       addComment()
  155.     })
  157.   </script>
  158. </body>
  160. </html>

四、环境对象

this--当前函数运行时所处的环境

普通函数中this指向window

谁调用，this指向谁

五、回调函数

当一个函数做参数传递给另一个函数时，这个函数是回调函数

综合案例 -- tab栏切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>tab栏切换</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     .tab {
  16.       width: 590px;
  17.       height: 340px;
  18.       margin: 20px;
  19.       border: 1px solid #e4e4e4;
  20.     }
  22.     .tab-nav {
  23.       width: 100%;
  24.       height: 60px;
  25.       line-height: 60px;
  26.       display: flex;
  27.       justify-content: space-between;
  28.     }
  30.     .tab-nav h3 {
  31.       font-size: 24px;
  32.       font-weight: normal;
  33.       margin-left: 20px;
  34.     }
  36.     .tab-nav ul {
  37.       list-style: none;
  38.       display: flex;
  39.       justify-content: flex-end;
  40.     }
  42.     .tab-nav ul li {
  43.       margin: 0 20px;
  44.       font-size: 14px;
  45.     }
  47.     .tab-nav ul li a {
  48.       text-decoration: none;
  49.       border-bottom: 2px solid transparent;
  50.       color: #333;
  51.     }
  53.     .tab-nav ul li a.active {
  54.       border-color: #e1251b;
  55.       color: #e1251b;
  56.     }
  58.     .tab-content {
  59.       padding: 0 16px;
  60.     }
  62.     .tab-content .item {
  63.       display: none;
  64.     }
  66.     .tab-content .item.active {
  67.       display: block;
  68.     }
  69.   </style>
  70. </head>
  72. <body>
  73.   <div class="tab">
  74.     <div class="tab-nav">
  75.       <h3>每日特价</h3>
  76.       <ul>
  77.         <li><a class="active" href="javascript:;">精选</a></li>
  78.         <li><a href="javascript:;">美食</a></li>
  79.         <li><a href="javascript:;">百货</a></li>
  80.         <li><a href="javascript:;">个护</a></li>
  81.         <li><a href="javascript:;">预告</a></li>
  82.       </ul>
  83.     </div>
  84.     <div class="tab-content">
  85.       <div class="item active"><img src="./image/tab00.png" alt="" /></div>
  86.       <div class="item"><img src="./image/tab01.png" alt="" /></div>
  87.       <div class="item"><img src="./image/tab02.png" alt="" /></div>
  88.       <div class="item"><img src="./image/tab03.png" alt="" /></div>
  89.       <div class="item"><img src="./image/tab04.png" alt="" /></div>
  90.     </div>
  91.   </div>
  92.   <script>
  93.     const as = document.querySelectorAll('.tab-nav a')
  94.     for(let i = 0; i < as.length; i++){
  95.       as[i].addEventListener('mouseenter',function() {
  96.         document.querySelector('.tab-nav .active').classList.remove('active')
  97.         this.classList.add('active')
  99.         document.querySelector('.tab-content .active').classList.remove('active')
  100.         document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
  101.       })
  102.     }
  103.   </script>
  104. </body>
  106. </html>
标签： 前端 javascript 学习
本文转载自: https://blog.csdn.net/Michelle209/article/details/129986696
版权归原作者 Michelle209 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端学习--JS入门(5) 事件监听/事件类型/事件对象”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。