事件对象:
IE下的事件对象:
案例:22-事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件对象</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById('btn');
//dom0级绑定事件的方式,兼容性好
btn.onclick = function(e){
//标准浏览器中,e就是事件对象
//ie 浏览器中是通过window.event属性获取当前的事件对象.
e = e ? e:window.event; //兼容ie和标准浏览器的获取对象事件.
console.dir(e);
}
// e.target; //事件源
// e.setElement //ie
if(e.target === this){
//判断事件是自己触发的还是冒泡
}
</script>
</body>
</html>阻止事件冒泡与默认行为
事件处理程序的返回值
案例: 23-阻止事件冒泡
<!DOCTYPE html>
<!-- e.stopPropagation e.cancelBubble -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止事件冒泡</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #089;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box" id="box">
<input type="button" value="子元素" id="btn"/>
</div>
<script>
var box = document.getElementById('box');
var btn = document.getElementById('btn');
box.onclick = function(e) {
alert('div');
}
btn.onclick = function(e) {
alert('btn');
//阻止子按钮的点击事件冒泡到父盒子
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation(); // 标准浏览器, 阻止事件冒泡
}else {
//如果是ie8以下 (包括ie8)
e.cancelBubble = true;
}
}
</script>
</body>
</html>案例: 24-阻止事件捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止事件捕获</title>
<style>
div {
border: 1px solid magenta;
width: 200px;
height: 200px;
padding: 30px;
}
</style>
</head>
<body>
<div id="pDiv">
<input type="button" value="按钮" id="btn">
</div>
<script>
var pDiv = document.getElementById('pDiv');
var btn = document.getElementById('btn');
pDiv.addEventListener('click', function(e){
alert('父DIV');
e.stopPropagation(); //即能阻止事件冒泡也能阻止事件捕获;
}, true);
btn.addEventListener('click', function(e) {
alert('子Btn');
},true);
</script>
</body>
</html>案例: 25-阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止默认行为</title>
</head>
<body>
<a id="link" href="http://www.chengcheng.kim/">个人网站</a>
<script>
var link = document.getElementById('link');
link.onclick = function(e) {
e = e || window.event; //兼容处理事件
// 标准浏览器
if(e.preventDefault) {
e.preventDefault(); //阻止默认行为
}else {
e.returnValue = false; // ie阻止默认行为,兼容ie 6-8
}
return false; // 返回值给一个false,非常有用,也可以实现阻止默认行为的效果.
}
</script>
</body>
</html>案例: 26-阻止表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止表单提交</title>
</head>
<body>
<form action="#">
用户名:<input type="text" name="txt" id="txtName" />
<hr>
<input type="submit" value="提交啊" id="btnSub">
</form>
<script>
var btnSub = document.getElementById('btnSub');
btnSub.onclick = function(e) {
e = e || window.event;
return false; // 通过返回false可以直接阻止表单的提交;
}
</script>
</body>
</html>案例: 27-事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件案例</title>
</head>
<body>
<input type="text" id="txt">
<input type="number">
<script>
var txt = document.getElementById('txt');
//onkeypress事件,当键盘上 键被按下时候会触发
txt.onkeypress = function(e) {
e = e || window.event;
// 事件对象中的keyCode属性就是你按下的键盘上的键的编码
// console.log(e.keyCode);
//0 => 48
//9 => 57
if(e.keyCode < 48 || e.keyCode > 57) {
console.log(e.keyCode);
return false; //当键盘按下了非数字键
}
};
</script>
</body>
</html>案例: 28-提醒用户是否离开的案例
<!DOCTYPE html>
<html lang="en">
<!-- attachEvent addEventListener preventDefault returnValue -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>提醒用户是否离开的案例</title>
</head>
<body>
<form action="http://www.chengcheng.kim/">
用户名:
<input type="text" id="txtName">
<hr>
<input type="submit" value="提交" id="btnSub">
</form>
<script>
window.onbeforeunload = function () {
return '您是否要离开啊?'; // 返回一个字符串,浏览器在跳转到其他页面或者关闭的时会提醒用户是否要离开
};
var btnSub = document.getElementById('btnSub');
var txtName = document.getElementById('txtName');
// btnSub.onclick = function(e) {
// // 取消默认操作,(在DOM0级中),可以使用return false
// // 判断用户名的文本框是否为空
// console.log('1');
// if(!txtName.value) {
// alert('用户名不能为空');
// return fasle; //所有浏览器都支持,但是只能在dom0级绑定事件中使用
// }
// }
if (btnSub.addEventListener) {
//标准浏览器
btnSub.addEventListener('click', btnSubClickHandler, false);
} else {
btnSub.attachEvent('onclick', btnSubClickHandler);
}
//提交按钮的事件处理程序
function btnSubClickHandler(e) {
e = e || window.event;
if(!txtName.value) {
alert('用户名不能为空');
//取消默认操作,取消表单提交
if(e.preventDefault) {
e.preventDefault(); // 标准浏览器阻止默认行为
}else {
e.returnValue = false; //ie 8
}
}
}
</script>
</body>
</html>
源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
上一篇: JS - 事件的概念 - 02
下一篇: JS - 事件类型 -04