系列课程目录
第十五讲 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+ "')\" /> <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>