js03.html
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>js03.html</title>
<style type="text/css">
#d1{background-color:red;width: 200px;height: 200px;}
</style>
</head>
<body>
js的事件
事件、事件源、响应行为
事件的绑定方式
将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('aaaa')"/>
将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button1" onclick="fn()"/>
<script type="text/javascript">
function fn(){
alert("bbbb");
}
</script>
将事件和响应行为与html标签完全分离
<input id="btn" type="button" value="button2"/>
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("cccc");
};
</script>
------this关键字
<input type="button" value="button3" onclick="fn1(this)"/> this代表整个input对象
<script type="text/javascript">
function fn1(obj){
alert(obj.type);
}
</script>
this经过事件的函数进行传递的是html标签对象
常用事件
onclick:点击事件
onchange:域内容被改变的事件
eg:实现二级联动
<select name="" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
<select name="" id="area">
<option value="hd">海淀</option>
<option value="cy">朝阳</option>
<option value="dc">东城</option>
</select>
<script>
var select=document.getElementById("city");
select.onchange=function(){
var optionVal=select.value;
switch(optionVal){
case 'bj':
document.getElementById("area");
area.innerHTML="<option>海淀</option><option value>朝阳</option><option>东城</option>";
break;
case 'tj':
document.getElementById("area");
area.innerHTML="<option>河西</option><option value>西青</option><option>南开</option>";
break;
case 'sh':
document.getElementById("area");
area.innerHTML="<option>浦东</option><option value>虹桥</option>";
break;
default :
alert("error");
}
}
</script>
onfocus:获得焦点事件
onblur:失去焦点的事件
eg:当输入框获得焦点的时候，提示输入的内容格式;
当输入框失去焦点的时候，提示输入有误
<label for="txt">name</label>
<input id="txt" type="text"/>
<span id="action"></span>
<script>
var txt=document.getElementById("txt");
txt.onfocus=function(){
//友好提示
var span=document.getElementById("action");//通过document获得span
span.innerHTML="用户名格式最小8位"; //给span加东西
span.style.color="green";
};
txt.onblur=function(){
//错误提示
var span=document.getElementById("action");
span.innerHTML="对不起，格式错误";
span.style.color="red";
};
</script>
<br/>
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
eg：鼠标移入变为绿色，移出恢复颜色
<div id="d1">
</div>
<script type="text/javascript">
var div=document.getElementById("d1");
div.onmouseover=function(){
this.style.backgroundColor="green";//this表示的就是div绑定的这个事件
}
div.onmouseout=function(){
this.style.backgroundColor="red";
}
</script>
<br/>
onload:加载完毕的事件
等到页面加载完毕再去执行onload事件指向的函数
<span id="span1"></span>
<script type="text/javascript"> //如果将它移到head标签里头 得在前面加上 window.onload
var span1=document.getElementById("span1");
span1.innerHTML="hello js!"; //页面加载完给span加入语句
</script>
<!-- 如果将它移到head标签里头 应该这么写
<script type="text/javascript">
window.onload=function(){
var span1=document.getElementById("span1");
span1.innerHTML="hello js!"; //页面加载完给span加入语句
}
</script>
-->
阻止事件的默认行为
IE: window.event.returnValue=false;
w3c: 传递过来的事件对象.preventDefault();
<a href="http://www.baidu.com" onclick="fn4(event)">请点击</a> event代表点击事件
<script type="text/javascript">
function fn4(e){
//IE: window.event.returnValue=false;
//w3c： 传递过来的事件对象.preventDefault();
if(e&& e.preventDefault){ //w3c标准
e.preventDefault();
}else{
//IE标准
window.event.returnValue=false;
}
}
</script>
通过事件返回false也可以阻止事件的默认行为
<!-- <a href="http://www.baidu.com" onclick="return false">请点击</a> -->
<a href="javascript:void(0);">kkkk</a> 点击不跳转
阻止事件的传播
//这样子点击fn5时，fn3也弹出来了
<div onclick="fn3()" style="width: 100px;height: 100px;background-color: green;padding: 50px;">
<div onclick="fn5()" style="width: 100px;height: 100px;background-color: red">
aaa
</div>
</div>
<script type="text/javascript">
function fn3(){
alert("fn3");
}
function fn5(){
alert("fn5");
}
</script>
IE: window.event.cancelBubble=true;
w3c: 传递过来的事件对象.stopPropagation();
解决方案：
<!--
<div onclick="fn3()" style="width: 100px;height: 100px;background-color: green;padding: 50px;">
<div onclick="fn5(event)" style="width: 100px;height: 100px;background-color: red">
aaa
</div>
</div>
<script type="text/javascript">
function fn3(){
alert("fn3");
}
function fn5(e){
alert("fn5");
//在这个地方阻止传播
if(e&& e.stopPropagation){ //w3c标准
e.stopPropagation();
}else{
//IE标准
window.event.cancelBubble=true;
}
}
</script>
-->
</body>
</html>