版权声明：本文为博主自学期间所整理的文章，欢迎转载与分享，自学交流+V“zhangdonghui370” https://blog.csdn.net/sinat_34137390/article/details/81531793
Javascript事件介绍
事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.
常见事件:
一、Js的常用事件
onclick:点击事件
onchange:域内容被改变的事件
需求：实现二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function () {
var select = document.getElementById("city");
alert(select.value);
select.onchange = function(){
var optionVal = select.value;
switch(optionVal){
case 'bj':
var area = document.getElementById("area");
area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
break;
case 'tj':
var area = document.getElementById("area");
area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
break;
case 'sh':
var area = document.getElementById("area");
area.innerHTML = "<option>浦东</option><option>杨浦</option>";
break;
default:
alert("error");
};
};
}
</script>
</head>
<body>
<!--<a href="javascript:void(0);">xxxxxx</a>-->
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝阳</option>
<option>东城</option>
</select>
</body>
</html>onfoucus:获得焦点的事件
onblur:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function () {
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "用户名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//错误提示
var span = document.getElementById("action");
span.innerHTML = "对不起 格式不正确";
span.style.color = "red";
};
}
</script>
</head>
<body>
<!--<a href="javascript:void(0);">xxxxxx</a>-->
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
</body>
</html> onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
#d1{
background-color: red;
width:200px;height: 200px;
}<div id="d1"></div><script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>onload:加载完毕的事件
等到页面加载完毕在执行onload事件所指向的函数
扫描二维码关注公众号，回复：
3005473 查看本文章
<span id="span"></span><script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>二、事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" /><script type="text/javascript">
function fn(){
alert("yyy");
}
</script>(3)将事件和响应行为 与html标签完全分离
<input id="btn" type="button" value="button"/><script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>拓展****this关键字
this经过事件的函数进行传递的是html标签对象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/><script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>------------------------------弹框“mybtn”
三、阻止事件的默认行为
标签比如a标签，有自动默认的跳转行为，怎么阻止其跳转呢？
IE：window.event.returnValue = false;//ie不支持event事件的传递，有时候也会传递一个假对象
火狐谷歌之类 W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="demo11.html" onclick="fn(event)">点击我吧</a>
<!--第二种方式：通过事件返回false也可以阻止事件的默认行为-->
<!--<a href="demo11.html" onclick="return false">点击我吧</a>-->
<!--常用方式：javascript:void(0);这个也可以阻止其事件 的跳转，比较常用-->
<!--<a href="javascript:void(0);">xxxxxx</a>-->
</body>
<script type="text/javascript">
function fn(e){
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}
}
</script>
</html>四、阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
需求：点击fn1，弹框“fn1”，点击fn2，弹框“fn2”，“fn1”，点击fn2会穿透到fn1，也进行弹框，所以为了交互体验和需求需要阻止其事件传播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div onclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;">
<div onclick="fn2(event)" style="width:100px;height:100px;background-color: red;">xxxx</div>
</div>
</body>
<script type="text/javascript">
function fn1(){
alert("fn1");
}
function fn2(e){
alert("fn2");
//阻止事件的传播
if(e&&e.stopPropagation){// Propagation 传播的意思
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;//bubble 气泡的意思
}
}
</script>
</html>