API之事件入门
|
108
|
前端
|

1230 字
|
20 分钟

简介

事件指的是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单机了一个按钮。

事件监听是让程序检测是否有时间产生，一旦有事件出发，就立即调用一个函数做出响应，也成为绑定事件，或者注册事件，比如鼠标经过显示下拉菜单，点击可以播放轮播图。

语法：

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

事件监听三要素

  • 事件源：哪一个DOM元素被触发了，要获取DOM
  • 事件类型：用什么方式触发，比如鼠标点击click,鼠标经过mouseover等等
  • 事件调用函数：要做什么事

我们来看个例子

 <body>
   <button>点我</button>
   <script>
     const btn = document.querySelector('button')
     btn.addEventListener('click',function(){
       alert('点我干嘛')
     })
   </script>
 </body>

那么我们该如何实现一个关闭广告的效果呢？

   <style>
     .box{
       position:relative;
       width:1000px;
       height:200px;
       background-color: red;
       margin: 100px auto;
       text-align: center;
       line-height: 200px;
       font-size: 50px;
       font-weight: 700;
     }
     .close{
       position: absolute;
       right:20px;
       top: 10px;
       width: 20px;
       height: 20px;
       background-color: skyblue;
       text-align: center;
       line-height: 20px;
       font-size: 20px;
       cursor: pointer;
     }
 ​
   </style>
 </head>
 ​
 <body>
   <div class="box">
     我是广告
     <div class="close">X</div>
   </div>
   <script>
     const close = document.querySelector('.close')
     const box = document.querySelector('.box')
     close.addEventListener('click',function(){
       box.style.display = 'none' 
     })
   </script>
 </body>
 ​

版本

on当时会被覆盖这里不多做介绍，addEventListener可多次绑定，拥有更多时间特性推荐使用。

事件类型

鼠标事件

  • click 鼠标点击
  • mouseenter鼠标经过
  • mouseleave鼠标离开

焦点事件

  • focus 获得焦点
  • blur失去焦点

键盘事件

  • Keydown键盘向下触发
  • Keyup 键盘抬起触发

文本事件

  • input 用户输入事件

版本

on当时会被覆盖这里不多做介绍，addEventListener可多次绑定，拥有更多时间特性推荐使用。

事件类型

鼠标事件

  • click 鼠标点击
  • mouseenter鼠标经过

我们来看个栗子

   <style>
     div{
       width: 200px;
       height: 200px;
       background-color: aqua;
     }
 ​
   </style>
 </head>
 <body>
   <div></div>
   <script>
     const div = document.querySelector('div')
     div.addEventListener('mouseenter',function(){
       div.style.backgroundColor = 'red'
     })
     div.addEventListener('mouseleave',function(){
       div.style.backgroundColor = 'aqua'
     })
   </script>
 </body>
  • mouseleave`鼠标离开

焦点事件

  • focus 获得焦点
  • blur失去焦点

键盘事件

  • Keydown键盘向下触发
  • Keyup 键盘抬起触发

文本事件

  • input 用户输入事件

案例

随机点名

业务分析：

  1. 点击开始按钮随机抽取一个数据放到页面中
  2. 点击结束按钮删除数组当年抽到的一个数据
  3. 当抽取到最后一个数据的时候两个按钮同时禁用，写点开始里面，只剩最后一个数据不用抽了

核心：利用定时器快速展示，停止计时器结束展示

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>案例</title>
   <style>
     *{
       margin: 0;
       padding: 0;
     }
     h2{
       text-align: center;
     }
     .box{
       width:600px;
       margin: 20px auto;
       display: flex;
       font-size: 25px;
       line-height: 40px;
     }
     .name{
       width: 450px;
       height: 40px;
       color:red;
     }
     .btns{
       text-align: center;
     }
     .btns button{
       width: 120px;
       height: 35px;
       margin: 0px 50px;
     }
   </style>
 </head>
 ​
 <body>
   <h2>随机点名</h2>
   <div class="box">
     <span>名字是：</span>
     <div class="name">毛不易</div>
   </div>
   <div class="btns">
     <button class="start">开始</button>
     <button class="stop">停止</button>
   </div>
   <script>
     const arr = ['毛不易','陈奕迅','薛之谦','赵英俊','周传雄']
     let timeId = 0
     /*1.开始事件 */
     const name= document.querySelector('.name') 
     const start = document.querySelector('.start')
     start.addEventListener('click',function(){
       timeId = setInterval(function(){
         /*随机数*/
         const random = parseInt(Math.random() * arr.length)
         name.innerHTML = arr[random]
       },10)
     })
     /*2.停止事件*/
     const stop =document.querySelector('.stop')
     stop.addEventListener('click',function(){
       clearInterval(timeId)
     })
   </script>
 </body>
 ​
 </html>

这里仅仅展示了能够实现随机生成，点击开始停止这三个模块的功能，这里注意一个点：

这里要把定时器定义为全局的，这样才能停止时间才能实现对定时器的操控代码不能写成下面的样子

 let timeId = setInterval(function(){}

这样会让定时器变为局部变量，而导致后面不能对定时器进行停止操作。

我们实际应用中，可能需要防止抽奖结果重复，这里我们增加一个防止重复的操作

   <script>
     const arr = ['毛不易','陈奕迅','薛之谦','赵英俊','周传雄']
     let timeId = 0
     /*1.开始事件*/
     let random = 0
     const name= document.querySelector('.name') 
     const start = document.querySelector('.start')
     start.addEventListener('click',function(){
       timeId = setInterval(function(){
         /*随机数*/
         random = parseInt(Math.random() * arr.length)
         name.innerHTML = arr[random]
       },10)
     })
     /*2.停止事件*/
     const stop =document.querySelector('.stop')
     stop.addEventListener('click',function(){
       clearInterval(timeId)
       arr.splice(random,1)
     })
   </script>

这里增加了防止重复的功能，这里也有一个和上面类似得到注意点

注意：这里你需要删除序号为random的元素，但是上面的代码中，random是局部变量，这里我们需要把他变成全局变量，当然上面要用let，还有随机数的生成一定是放在function里面的，因为只有点击了之后才开的是随机滚动，即随机数的生成

但是这样并不完美，当我们抽完之后发现

image-20250217130550126

我能不能把按钮给ban掉，让他不能额外抽取。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>案例</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
     h2 {
       text-align: center;
     }
     .box {
       width:600px;
       margin: 20px auto;
       display: flex;
       font-size: 25px;
       line-height: 40px;
     }
     .name { 
       width: 450px;
       height: 40px;
       color:red;
     }
     .btns {
       text-align: center;
     }
     .btns button{
       width: 120px;
       height: 35px;
       margin: 0px 50px;
     }
   </style>
 </head>
 ​
 <body>
   <h2>随机点名</h2>
   <div class="box">
     <span>名字是：</span>
     <div class="name">毛不易</div>
   </div>
   <div class="btns">
     <button class="start">开始</button>
     <button class="stop">停止</button>
   </div>
   <script>
     const arr = ['毛不易','陈奕迅','薛之谦','赵英俊','周传雄']
     let timeId = 0
     /*1.开始事件*/
     let random = 0
     const name= document.querySelector('.name') 
     const start = document.querySelector('.start')
     start.addEventListener('click',function(){
       timeId = setInterval(function(){
         /*随机数*/
         random = parseInt(Math.random() * arr.length)
         name.innerHTML = arr[random]
       },10)
       /*只有一个值*/
       if(arr.length == 1){
         start.disabled = stop.disabled =  true
       }
     })
     /*2.停止事件*/
     const stop =document.querySelector('.stop')
     stop.addEventListener('click',function(){
       clearInterval(timeId)
       arr.splice(random,1)
     })
   </script>
 </body>
 ​
 </html>

这是最后的代码。

轮播图

 <!DOCTYPE html>
 <html lang="en">
 <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 .toggle{
       position: absolute;
       right: 0;
       top: 12px;
       display: flex;
     }
     .slider-footer .toggle button{
       margin-right: 12px;
       width: 28px;
       height: 28px;
       appearance: none;
       border: none;
       background:rgba(255,255,255,0.1);
       color:#fff;
       border-radius:4px;
       cursor: pointer;
     }
     .slider-footer .toggle button:hover{
       background:rgba(255,255,255,0.2);
     }
     .slider-footer p{
       margin:0;
       color:#fff;
       font-size:18px;
       margin-bottom:10px;
     }
     .slider-indicator{
       margin: 0;
       padding: 0;
       list-style: none;
       display:flex;
       align-items: center;
     }
     .slider-indicator li{
       width: 8px;
       height:8px;
       margin: 4px;
       border-radius: 50%;
       background:#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="https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202546919.png" 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>
     </ul>
     <div class="toggle">
       <button class="prev">&lt;</button>
       <button class="next">&gt;</button>
     </div>
   </div>
 </div>
     <script>
       //1.初始化数据*/
       const data=[
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202546919.png',title: '再见深海'},
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202609273.png',title: '明年今日'},
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202707901.png',title: '富士山下'},
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202524095.png',title: '差一步'},
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202503154.png',title: '月亮惹的祸'},
         {url:'https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211202408770.png',title: '无名的人'},
       ]
       const img = document.querySelector('img')
       const p = document.querySelector('p')
       /*2.右侧箭头*/
       const next = document.querySelector('.next')
       let i = 0 /*控制播放的照片张数*/
       next.addEventListener('click',function(){
       i++
       i = i>= data.length ? 0 :  i
       img.src = data[i].url
       p.innerHTML = data[i].title
       /*更换小圆点  移除原来的类名，添加当前的类名*/
       document.querySelector('.slider-indicator .active').classList.remove('active')
       document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
       })
       /*3.左侧箭头*/
       const prev = document.querySelector('.prev')
       prev.addEventListener('click',function(){
       i--
       i = i<0 ? data.length - 1 :  i
       img.src = data[i].url
       p.innerHTML = data[i].title
       /*更换小圆点  移除原来的类名，添加当前的类名*/
       document.querySelector('.slider-indicator .active').classList.remove('active')
       document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
       })
 ​
       /*自动播放*/
       let timeId = setInterval(function(){
         /*js自动调用点击事件*/
         next.click()
       },1000)
       /*鼠标经过轮播暂停*/
       const slider = document.querySelector('.slider')
       slider.addEventListener('mouseenter',function(){
         clearInterval(timeId)
       })
       /*鼠标离开开始轮播*/
       slider.addEventListener('mouseleave',function(){
         timeId = setInterval(function(){
           next.click()
         },1000)
       })
   </script>
 </body>
 </html>
APIJavaScriptJAVA全栈前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之入门第一课

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
JS基础——基础语法（1）

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
CSS常见属性之字体属性和文本属性

							
							

							
css的三大特性以及像素和颜色

							
							

							
CSS之伪元素选择器及选择器的优先级