事件绑定及阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--基本style样式-->
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
text-align: center;
}
#sp{
background-color: yellow;
}
#box2{
width: 300px;
height: 300px;
background-color: #FF0000;
}
</style>
<script type="text/javascript">
window.onload = function () {
var s1 = document.getElementById('sp');
s1.onclick = function (event) {
event = event || window.event;
alert("I'm span click.");
event.cancelbubbles = true;
}
var box1 = document.getElementById('box1');
box1.onclick = function (event){
event = event || window.event;
event.cancelbubbles = true;
alert("我是box移出触发.");
}
var boddy = document.getElementById('boddy');
boddy.onclick = function () {
alert('我是boddy点击测试');
}
}
</script>
</head>
<body id="boddy">
<div id="box1">
I'm box1
<span id="sp">I'm span</span>
</div>
</body>
</html>
绑定事件及addEventListener用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--基本style样式-->
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
text-align: center;
}
#sp{
background-color: yellow;
}
#box2{
width: 300px;
height: 300px;
background-color: #FF0000;
}
</style>
<script type="text/javascript">
window.onload = function () {
var s1 = document.getElementById('sp');
s1.onclick = function (event) {
event = event || window.event;
alert("I'm span click.");
event.cancelbubbles = true;
}
var box1 = document.getElementById('box1');
box1.onclick = function (event){
event = event || window.event;
event.cancelbubbles = true;
alert("我是box移出触发.");
}
var boddy = document.getElementById('boddy');
boddy.onclick = function () {
alert('我是boddy点击测试');
}
}
</script>
</head>
<body id="boddy">
<div id="box1">
I'm box1
<span id="sp">I'm span</span>
</div>
</body>
</html>
键盘事件基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KeyEvent</title>
<script type="text/javascript">
window.onload = function () {
document.onkeydown = function (event) {
console.log('trigger keydown.');
if(event.key === 'y'){
console.log('Conntiue.....');
}else if (event.key === 'n'){
console.log('cancel');
}
}
document.onkeyup = function () {
console.log('trigger keyup.');
}
document.onkeydown = function (event) {
if (event.ctrlKey && event.key === 'c'){
console.log('ctrl and c touched....');
}
}
}
</script>
</head>
<body>
<input type="text">
</body>
</html>