Lession07 javascript事件及应用
2023-06-29 本文已影响0人
任人渐疏_Must
事件注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件注册</title>
</head>
<body>
<!-- 将事件绑定到页面元素属性 -->
<a href="#" onclick="alert('恭喜，你中了500万大奖')">点我看看</a>
<form action="" name="myform">
<!-- onblur 当失去焦点是触发事件 -->
小写：<input type="text" name="lower" onblur="conToUp(this)"><br>
大写：<input type="text" name="upper">
</form>
<!-- 将事件绑定到对象属性 -->
<a href="#" id="info">点我看看2</a>
<script>
function conToUp(textbox){
document.myform.upper.value=textbox.value.toUpperCase();//this代表文本框
}
document.getElementById('info').onclick=function(){
alert('恭喜你中了1000万大奖');
}
function down(){
alert("你点击了鼠标");
}
document.onmousedown=down;
</script>
</body>
</html>
事件处理函数的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理函数的返回值</title>
</head>
<body>
<form action="" name="myform">
姓名：<input type="text" name="username">
<!-- 返回false 来阻止表单提交 -->
<input type="submit" value="提交" onclick="return false;">
</form>
</body>
</html>
window对象常用事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象常用事件案例</title>
<style>
body{
margin: 0;
padding: 0;
}
.nav{
position: fixed;
top:0;
left: 120px;
}
.box{
margin-top: 43px;
text-align: center;
}
.ad1{
position: absolute;
left:0;
top:65px;
}
.ad2{
position: absolute;
right:0;
top:65px;
}
</style>
<script>
function move(){
var ad1 = document.getElementById('ad1');
var ad2 = document.getElementById("ad2");
//得到bo dy滚动的离页面上边界的值 documentElement:以一个元素对象返回一个文档的文档元素
var top = document.documentElement.scrollTop;
console.log(top);
ad1.style.marginTop=top+'px';
ad2.style.marginTop=top+'px';
}
window.onscroll=move;
</script>
</head>
<body>
<div class="content">
<div class="nav"><img src="./img/r1_c1.png" alt=""></div>
<div class="box"><img src="./img/box.png" alt=""></div>
<div class="ad1" id="ad1" onclick="style.display='none'"><img src="./img/r2_c1.png" alt=""></div>
<div class="ad2" id="ad2" onclick="style.display='none'"><img src="./img/r2_c2.png" alt=""></div>
</div>
</body>
</html>
Document对象常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document对象常用事件</title>
<script>
function move(){
var img = document.getElementById('id0');
//左
if(event.keyCode===37){
img.style.left=parseInt(img.style.left)-5+'px';
}
//上
if(event.keyCode===38){
img.style.top=parseInt(img.style.top)-5+'px';
}
//右
if(event.keyCode===39){
img.style.left=parseInt(img.style.left)+5+'px';
}
//下
if(event.keyCode===40){
img.style.top=parseInt(img.style.top)+5+'px';
}
}
document.onkeydown=move;
</script>
</head>
<body style="background: #16ffaf;">
<div id="id0" style="position: absolute;left: 200px; top: 500px;">
<img src="img/car.jpg" alt="广告">
</div>
</body>
</html>
文本框对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本框对象</title>
<script>
var flag = false;//标志是否提交表单
function cls0(){
var val = document.myform.mainMail.value;
if(val=="请输入邮件地址"){
//文本框清空
document.myform.mainMail.value="";
}
document.myform.mainMail.focus();//邮箱地址得到焦点
}
function doAction0(){
var email = document.myform.mainMail.value;
var reg = /^\w+@\w+[\.]{1}\w+[\.]?\w+$/;
if(!reg.test(email)){
document.getElementById("td0").innerHTML="<font color='red'>邮件地址不符合要求</font>";
document.myform.mainMail.select();//输入框高亮显示
flag=false;
}else{
document.getElementById("td0").innerHTML="<font color='green'>邮件地址格式正确</font>";
flag=true;
}
}
function check(){
return flag;
}
</script>
</head>
<body>
<form name="myform" onsubmit="return check()">
<table width="560" height="173" border="1" align="center" cellspacing="0">
<tr>
<td height="31" colspan="3" align="center"><font size="+1" color="#000099">创建你的雅虎邮箱</font></td>
</tr>
<tr>
<td width="129" height="33" align="right">雅虎邮箱:</td>
<td width="175">
<!-- onfocus:光标进入文本框时触发 onblur:光标离开文本框时触发 -->
<input type="text" name="mainMail" value="请输入邮件地址" onfocus="cls0()" onblur="doAction0()">
</td>
<td width="240" id="td0">邮箱名只能是字母、数字和下划线</td>
</tr>
</table>
</form>
</body>
</html>
复选框对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框对象</title>
<script>
function enableButton(){
if(document.myform.tiaokuan.checked){
document.myform.sub.disabled=false;
}else{
document.myform.sub.disabled=true;
}
}
function checkForm(){
var cks = document.myform.mail_directory;
var ischeck = false;
for(var i=0;i<cks.length;i++){
if(cks[i].checked){
ischeck=true;
break;
}
}
return ischeck;
}
</script>
</head>
<body>
<form action="" name="myform" onsubmit="return checkForm();">
<table border="1" cellspacing="0" cellpadding="0" width="646" height="173">
<tr>
<td height="31" colspan="3"><font size="-1" color="#000099">中国雅虎直邮</font></td>
</tr>
<tr>
<td width="46"> </td>
<td width="588" colspan="2">请选择以下直邮类别（必须选一个，可多选）</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="checkbox" name="mail_directory" value="trl">旅游
<input type="checkbox" name="mail_directory" value="rlx">休闲
<input type="checkbox" name="mail_directory" value="fin">财经
<input type="checkbox" name="mail_directory" value="car">汽车
<input type="checkbox" name="mail_directory" value="mus">音乐
<input type="checkbox" name="mail_directory" value="hos">房产
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="checkbox" name="tiaokuan" onclick="enableButton()">
我已阅读并同意
</td>
<tr>
<td> </td>
<td colspan="2" align="center">
<textarea rows="5" cols="80">
1.接受条款
.............
</textarea>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<!-- 提交表单按钮是灰色的，同意条款才能使用 -->
<input type="submit" name="sub" value="提交表单" disabled="">
</td>
</tr>
</tr>
</table>
</form>
</body>
</html>
下拉列表框对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表框对象</title>
<script>
function changeOptions(){
var contents0 = new Array();//构造第一个数组
contents0[0]=["选择区县","海淀区","东城区","西城区","朝阳区","丰台区","密云县","延庆县"];
contents0[1]=["行政区","海淀区","东城区","西城区","朝阳区","丰台区"];
contents0[2]=["北京市","天津市","上海市","江苏","浙江","安徽","福建"];
contents0[3]=["选择区县","海淀区","东城区","西城区","朝阳区","丰台区","密云县","延庆县"];
var contents1 = new Array();//构造第二个数组
contents1[0]=['物业类型','普通住宅','公寓','别墅','经济适用房','廉租房','限价房','花园洋房'];
contents1[1]=['商圈','国贸','中关村','金融街','亚运村','奥运村','公主坟'];
contents1[2]=['展示','出租','出售','求租','求购'];
contents1[3]=['总价','30万元以下','30万元-40万元','40万元-60万元','60万元-80万元','80万元-100万元','100万元以上'];
var index = document.myform.types.selectedIndex;//得到第一个下拉列表的索引
var option0,option1;
document.myform.district.options.length=0;//清空第二个下拉列表
document.myform.other.options.length=0;//清空第三个下拉列表
for(var i in contents0[index]){ //循环生成选项并加入选项到第二个列表框
option0 = new Option(contents0[index][i],i);//使用new Option('文字内容','值')生成选项对象
document.myform.district.options.add(option0);
}
for(var j in contents1[index]){//循环生成选项并加入选项到第二个列表框
option1=new Option(contents1[index][j],j);
document.myform.other.options.add(option1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
<span>新房</span><span>写字楼</span><span>商铺</span><span>别墅</span>
<select name="types" onchange="changeOptions()">
<option value="">新房</option>
<option value="">写字楼</option>
<option value="">商铺</option>
<option value="">别墅</option>
</select>
<select name="district">
<option value="">选择区县</option>
<option value="">海淀区</option>
<option value="">东城区</option>
<option value="">西城区</option>
<option value="">朝阳区</option>
</select>
<select name="other">
<option value="">物业类型</option>
<option value="">普通住宅</option>
<option value="">公寓</option>
<option value="">别墅</option>
<option value="">经济适用房</option>
</select>
<select name="price">
<option value="">选择价格</option>
<option value="">3000元以下</option>
<option value="">3000-5000元</option>
<option value="">5000-10000元</option>
<option value="">1万元-3万元元</option>
<option value="">3万元以上</option>
</select>
</form>
</body>
</html>
IE的Event事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IE的Event事件对象</title>
<script>
function move(){
lay.style.pixelLeft=window.event.clientX;//获取鼠标的横坐标
lay.style.pixelTop=window.event.clientY;//获取鼠标的纵坐标
}
document.onmousemove=move;
</script>
</head>
<body>
<div id="lay" style="position: absolute; left: 50px; top:50px;width: 100px;height: 100px;">
<img src="./img/car.jpg">
</div>
</body>
</html>
