【JavaScript-10】webAPI---DOM事件的内容+案例

最新推荐文章于 2023-04-06 08:23:52 发布

简单Janeee

最新推荐文章于 2023-04-06 08:23:52 发布

阅读量90

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/liqiannan8023/article/details/125530284

版权

JavaScript基础专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一.事件组成

事件源事件类型事件处理程序我们也称之为三要素

（1）事件源事件被触发的对象谁按钮

（2）事件类型如何触发什么事件

比如鼠标点击（onclick）还是鼠标经过，还是键盘按下

（3）事件处理程序通过一个函数赋值的方式完成

例子：鼠标点击更换背景图，轮空循环

要学会思路

<style>
		
		.banner{
			width: 900px;
			height: 500px;
			margin:0 auto;
			background-image: url(images/1.jpg);
			background-size: cover;
			background-position: center;
			position: relative;
		}
		.icon{
			position: absolute;
			right: 10px;
			bottom: 30px;
			width: 120px;
			height: 30px;
		}
		span{
			float: left;
   	 		width: 30px;
    		height: 30px;
   			border-radius: 15px;
   		 	margin-right: 10px;
    		background-color: rgba(0,0,0,0.5);
    		text-align: center;
    		color: #fff;
    		line-height: 30px;
   	 		cursor: pointer;
		}
		.active{
			background-color: orange;
			box-shadow: 0px 0px 10px 3px #d4d0d0;
		}
	</style>
</head>
<body>

<!-- 老师版 -->
	<div class="banner">
		<div class="icon">
		<!-- 方法二自定义属性 -->
			<span class="active" data-url= "images/2.jpg" >1</span>
			<span data-url= "images/3.jpg">2</span>
			<span data-url= "images/4.jpg">3</span>
		</div>
	</div>
	<script>
		var banner = document.querySelector(".banner");
		var spans = document.querySelectorAll("span");

		//使用for循环循环添加图片
		for(var i = 0;i<spans.length;i++){
			//for循环给span赋值了，i只在循环中有用，所以此刻使用this,利用for循环遍历所有span
			spans[i].onclick = function(){
				var urls = this.getAttribute("data-url");
				var colors = this.getAttribute("data-color");
				// console.log("url",urls);
				banner.style.backgroundImage = "url("+urls+")";
				// spans.style.backgroundColor = "rgba("+colors+")";此处不可用
				

				//先清空背景图样式，再添加，每次点击的时候才会出现这个for循环
				for(var x = 0;x<spans.length;x++){
					spans[x].className = "";
					//出现三次清空再添加样式，全部清空之后再次添加样式
				}
				//再添加
				this.className = "active";
				
				//urls要作为变量使用，所以此刻要使用引引加加，连接字符串和变量
			}
		}
		/*spans[0].onclick = function(){
			banner.style.backgroundImage = "url(images/2.jpg)";
		} 
		spans[1].onclick = function(){
			banner.style.backgroundImage = "url(images/3.jpg)";
		} 
		spans[2].onclick = function(){
			banner.style.backgroundImage = "url(images/4.jpg)";
		} */
	</script>
	
</body>

例子：输入名字添加到列表中，并可以删除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM回顾</title>
	<style>
		.center{
			width: 458px;
			margin: 0 auto;
			background-color: #ccc;
		}
		.input_top1{
			width: 100%;
		}
		.bg_color{
			background-color: orange;
		}
		table{
			width: 458px;
		}

		/*.content{
			height: 20px;
		}*/
		table thead tr th{
			width: 30%;
			text-align: center;
		}
		/*删除按钮*/
		.de_btn{
			cursor: pointer;
		}
	</style>
</head>
<body>

<!-- 勿删有bug -->
	<div class="center">
		<div class="input_top1">
		歌手<input class="inp1" type="text" placeholder="请输入歌手名">
		歌曲<input class="inp2" type="text" placeholder="请输入歌曲名">
		<button class="btn">添加</button>

		</div>
		
		<div class="content">
			<!-- 表头 -->
			<table cellspacing="0px" cellpadding="5px">
				<thead>
					<tr>
						<th>歌手</th>
						<th>歌曲</th>
						<th class="bg_color">操作</th>
					</tr>
				</thead>
			<!-- 表格内容 -->
				<tbody class="tb_box">
					<!-- <tr>
						<td>筷子兄弟</td>
						<td>小苹果</td>
						<td class="de_btn bg_color">删除</td>
					</tr>
					<tr>
						<td>陈奕迅</td>
						<td>十年</td>
						<td class="de_btn bg_color">删除</td>
					</tr> -->
					
				</tbody>
			</table>
		</div>
		
	</div>

	<script>
		var inp1  =document.querySelector(".inp1");
		var inp2 = document.querySelector(".inp2");
		var table = document.querySelector("table");
		
		
		var btn = document.querySelector(".btn");


		btn.onclick = function(){
			console.log("能都输入");
			// 拿到输入框中的值
			var val1 = inp1.value;
			var val2 = inp2.value;
			//获取输入框里的值
			//创建节点
			//限制为空不添加
			if(val1 == "" || val2 == ""){
				alert("请您输入正确歌手或歌曲名");
			}else{
				var tb = document.querySelector("tbody");
				var newtr = document.createElement("tr");
				var tdAdd1 = document.createElement("td");
				var tdAdd2 = document.createElement("td");
				var tdAdd3 = document.createElement("td");
				tdAdd1.innerHTML = val1;
				tdAdd2.innerHTML = val2;
				tdAdd3.innerHTML = "删除";


				//添加孩子节点
				newtr.appendChild(tdAdd1);
				newtr.appendChild(tdAdd2);
				newtr.appendChild(tdAdd3);
				tdAdd3.className = "bg_color";
				//将tr添加到tbody里面
				tb.appendChild(newtr);
				




				//删除操作
				tdAdd3.onclick = function(){
					console.log("删除是否能出来");
					this.parentNode.parentNode.removeChild(this.parentNode);		
				}

				//点击添加的时候清空输入框的值
				inp1.value = "";
				inp2.value = "";
			}
		}
		
		

	</script>

	
</body>
</html>

简单Janeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-10】webAPI---DOM事件的内容+案例

事件源事件类型事件处理程序我们也称之为三要素（1）事件源事件被触发的对象谁按钮（2）事件类型如何触发什么事件比如鼠标点击（onclick）还是鼠标经过，还是键盘按下（3）事件处理程序通过一个函数赋值的方式完成要学会思路...
复制链接

扫一扫