第十五讲 DOM编程（三）

最新推荐文章于 2024-06-01 09:55:20 发布

鵼鷡

最新推荐文章于 2024-06-01 09:55:20 发布

阅读量242

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/llXlI/article/details/116067005

版权

系列课程目录

第十五讲 DOM编程（三）

前言

JavaScript 操作DOM对象

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM事件绑定

1.DOM0级别事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容

HTML绑定
在这里插入图片描述
JS绑定

JS绑定事件时，不能加()，否则会在页面加载时立即执行
可以绑定匿名函数

1.DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

addEventListener()
在这里插入图片描述

第一个参数为事件名，不加on
第二个参数为函数名，不加引号
第二个参数为函数名，不加括号(）
可以绑定匿名函数

removeEventListener()
在这里插入图片描述
无法移除匿名添加的函数

3.DOM0级事件和DOM2级事件区别

DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖

在这里插入图片描述

DOM2级事件只能可以绑定多个函数，且有执行顺序

在这里插入图片描述

DOM0级事件与DOM2级事件互不影响

在这里插入图片描述

DOM2级事件拥有事件流，分为三个阶段

捕获事件阶段
处于目标阶段
事件冒泡阶段

可通过第三个可选参数控制事件流

*此处仅了解即可

4.事件传参

在这里插入图片描述

无法绑定成功，加括号会直接执行

行内绑定，注意加引号

使用匿名函数

event为默认参数，不需传入即可调用，该对象表示触发的事件本身
event.target会返回触发该事件的目标元素

在这里插入图片描述
行内调用时，传入this，this代表该元素本身

5.常用事件

在这里插入图片描述

练习：用户在输入框内输入任意字符，每输入一个字符，下方出现输入的字符
按下Enter键后，弹出alert框，显示用户输入(提示：可通过event.code判断用户按下的按键)
在这里插入图片描述
答案：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="vl" value="" onkeyup="check()"/>
		<p id="text"></p>
		<script type="text/javascript">
			function check(){
				document.getElementById("text").innerHTML=document.getElementById("vl").value
				if(event.code=="Enter"){
					alert(document.getElementById("vl").value)
				}
			}
		</script>
	</body>
</html>

练习：
从互联网上下载任意大于500*500的图片，在页面上显示图片，宽度设置为200；
当鼠标移入该图片时，出现该图片的放大图（宽度500），并且跟随鼠标移动
当鼠标移出时，消除放大图片

在这里插入图片描述
答案：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/tp1.jpg" width="300px" style="position: relative;" onmousemove="check()" onmouseout="remove()">
		<img id="tp">
		<script type="text/javascript">
			function check(){
				var x=event.pageX
				var y=event.pageY
				var tp=document.getElementById("tp")
				tp.src="img/tp1.jpg"
				tp.setAttribute("style","position: absolute;left:"+(x+5)+"px;top:"+(y+5)+"px")
				
			}
			function remove(){
				document.getElementById("tp").src=""
				
			}
		</script>
	</body>
</html>

二、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务15-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="table" border="" cellspacing="" cellpadding="">
			<tr><th>商品名称</th><th>数量</th><th>单价</th><th>操作</th></tr>
			
		</table>
		<input type="button" name="" id="" value="增加订单" onclick="tj()"/>
		<script type="text/javascript">
			var count=0;
			function tj(){
				var table=document.getElementById("table");
				var row_index=table.rows.length;       
				var newRow=table.insertRow(row_index);  
				count++
				newRow.id="row"+count;                 
				var col1=newRow.insertCell(0);
				col1.innerHTML="<input name='g_n"+count+"' type='text' />";
				
				var col2=newRow.insertCell(1);
				col2.innerHTML="<input name='num"+count+"' type='text' />";
				
				var col3=newRow.insertCell(2);
				col3.innerHTML="<input name='pr"+count+"' type='text' />";
				
				var col4=newRow.insertCell(3);
				col4.innerHTML="<input name='del"+count+"' type='button' value='删除' οnclick=\"delRow('row"+count+ "')\" />&nbsp;<input name='sure"+count+"' type='button' value='确认' οnclick=\"sureRow('row"+count+ "')\" />";
			}
			function delRow(rowId){
			    var row=document.getElementById(rowId).rowIndex;   
			    document.getElementById("table").deleteRow(row); 
			    }
			function sureRow(rowId){
			    var row=document.getElementById(rowId).rowIndex;   
			    var col=document.getElementById(rowId).cells;
				var text1=col[0].firstChild.value;
				col[0].innerHTML=text1;
			    var text2=col[1].firstChild.value;
			    col[1].innerHTML=text2;
			    var text3=col[2].firstChild.value;
			    col[2].innerHTML=text3;
			    col[3].lastChild.value="修改";
			    col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");
			}
			function editRow(rowId){
			    var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
			    var col=document.getElementById(rowId).cells;
				var text1=col[0].innerHTML;
				col[0].innerHTML="<input name='g_n"+row+"' type='text' value='"+text1+"' />";
				var text2=col[1].innerHTML;
				col[1].innerHTML="<input name='num"+row+"' type='text' value='"+text2+"' />";
			    var text3=col[2].innerHTML;
			    col[2].innerHTML="<input name='pr"+row+"' type='text' value='"+text3+"' />";
			    col[3].lastChild.value="确定";
			    col[3].lastChild.setAttribute("onclick","sureRow('"+rowId+ "')");
			    }
		</script>
	</body>
</html>

鵼鷡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十五讲 DOM编程（三）

系列课程目录第十五讲 DOM编程（三）目录系列课程目录前言一、DOM事件绑定1.DOM0级别事件绑定1.DOM2级别事件绑定3.DOM0级事件和DOM2级事件区别4.事件传参5.常用事件二、课堂作业1.按照要求完成任务2.解析代码前言JavaScript 操作DOM对象提示：以下是本篇文章正文内容，下面案例可供参考一、DOM事件绑定1.DOM0级别事件绑定DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容HTML绑定JS绑定JS绑定事件时，不能加()，否则
复制链接

扫一扫