您的位置：首页 > Web前端 > JavaScript

【JavaWeb】JavaScript_事件编程

2018-01-20 14:44 381 查看

事件编程

1.事件编程三要素：
（1）事件源：就是html标签
（2）监听器：实质就为一个函数，触发事件
（3）注册（绑定）监听器：根据不同的事件进行绑定——>onclick，ondbclick，onfocus，onblur

2.事件编程分类：
（1）与点击相关的
<1>单击事件 onclick
<2>双击事件 ondbclick
（2）与焦点相关的
<1>获取焦点 onfocus
<2>失去焦点 onblur
（3）与选项发生改变的事件
<1>下拉菜单 onchange
例如省市区县三级联动
（4）和页面加载有关的事件
<1>页面加载 onload
注：一般用在父标签body，body加载完就会触发 onload事件
（5）与鼠标相关的
<1>鼠标经过 onmouseover
<2>鼠标移出 onmouseout



点击相关的事件

1.单击事件：
（1）编写监听器
function checkClick(){
alert("触发了单击点击事件");
}
（2）绑定onclick监听器
<input type="button" value="单击" onclick="checkClick()" />
2.双击事件：
（1）编写监听器
function checkDbClick(){
alert("触发了双击点击事件");
}
（2）绑定ondbclick监听器
<input type="button" value="双击" ondbclick="checkDbClick()"
/>

例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>和点击相关的事件</title>
<script type="text/javascript">
//编写监听器
function checkClick(){
alert("触发了单击点击事件...");
}

function checkDbClick(){
alert("触发了双击点击事件...") ;
}
</script>
</head>

<body>
<input type="button" value="单击" onclick="checkClick()" /><br/>
<input type="button" value="双击"  ondblclick="checkDbClick()" />
</body>
</html>


焦点相关的事件


作用：一般用于表单验证里面

1.获取焦点：onfocus

2.失去焦点：onblur

练习：与焦点相关的事件用于表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>和焦点相关的事件</title>

</head>

<body>
用户名:<input type="text" value="4-16位数字或者字母" id="username" onfocus="testFocus()" onblur="testBlur()" /><span id="userNameTip"></span>
</body>
<script type="text/javascript">

//应用场景:一般情况用在表单验证里面
//和获取焦点相关的

function testFocus(){
//获取id=username所在的标签对象
var username = document.getElementById("username") ;
username.value = "" ;
}

//和失去焦点相关的
function testBlur(){
//获取用户输入的内容
var username = document.getElementById("username").value ;
//获取span标签对象
var userNameTip = document.getElementById("userNameTip") ;
//假设如果用户录入的是eric这个名字,那么就认为它是正确,否则错误给出提示
if(username=="eric"){
//就要给span标签对象设置innerHTML属性,表示符合规则,正确
userNameTip.innerHTML = "用户名输入正确,符合的规则".fontcolor("green") ;
}else {
userNameTip.innerHTML = "不符合规则,请重新输入".fontcolor("red");
}
}
</script>
</html>

效果：当鼠标点击输入栏时，文字消失变为空，输入完毕鼠标移走时，进行验证确定是否符合规则

选项改变的事件

下拉菜单：onchange

练习：选择籍贯时，选完省自动切到对应的市
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项改变的事件</title>
</head>

<script type="text/javascript">

function testChange(){
//获取选择籍贯的实际内容,通过id属性获取选项内容
var jiguan = document.getElementById("jiguan").value ;

//获取id="city"所在的select标签对象
var city = document.getElementById("city") ;

//在每次选择的时候,要清空掉上次的内容
city.innerHTML = ""	 ;

//判断选择的是哪个籍贯的内容
if(jiguan=="陕西"){
//创建一个数组
var arr = ["西安","宝鸡","渭南"] ;
//遍历数组
for(var i = 0 ; i <arr.length ; i++){
//设置city所在的select的innerHTML属性
// 将arr[0] 和arr[1] arr[2]的标签都加起来在city里显示
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}

if(jiguan=="广东"){
//创建一个数组
var arr = ["深圳","广州","珠海"] ;
//遍历数组
for(var i = 0 ; i <arr.length ; i++){
//设置city所在的select的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}

if(jiguan=="山西"){
//创建一个数组
var arr = ["运城","大同","太原"] ;
//遍历数组
for(var i = 0 ; i <arr.length ; i++){
//设置city所在的select的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
}

</script>

<body>

籍贯:
<select id="jiguan" onchange="testChange()">
<option value="请选择">请选择<option>
<option value="陕西">陕西<option>
<option value="山西">山西<option>
<option value="广东">广东<option>
</select>
城市:
<select id="city">
</select>

</body>
</html>


效果：



鼠标相关的事件

1.鼠标经过 onmouseover：
（1）编写监听器
function testMouseOver(){
alert("触发了鼠标经过的事件");

}

      （2）绑定onmouseover监听器
<div id="div1" onmouseover="testMouseOver()">我想吃烧烤啊，烤肉 烤筋 烤鱼柳 麻辣小龙虾 烤土豆 烤韭菜</div>

2.鼠标移出 onmouseout
（1）编写监听器
function testMouseOut(){
alert("触发了鼠标经过的事件");

}

 （2）绑定onmouseout监听器
<div id="div1"
onmouseout="testMouseOut()">我想吃烧烤啊，烤肉 烤筋 烤鱼柳 麻辣小龙虾 烤土豆 烤韭菜</div>

练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标事件</title>
</head>

<style type="text/css">
#div1{
width:100px ;
height:100px ;

border:1px solid #000 ;

background-color:#F00 ;
}
</style>

<script type="text/javascript">

function testMouseOver(){
alert("触发了鼠标经过的事件");
}

function testMouseOut(){
alert("触发了鼠标移出的事件") ;
}

</script>

<body>

<div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()">我想吃烧烤啊，烤肉 烤筋 烤鱼柳 麻辣小龙虾 烤土豆 烤韭菜</div>
</body>
</html>


效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航