事件流
2016-04-21 本文已影响26人
TimeLesser
事件冒泡
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
事件捕获
是否捕获
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1() {
alert( this.id );
}
/*oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;*/
//false = 冒泡
//告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, false);
oDiv2.addEventListener('click', fn1, false);
oDiv3.addEventListener('click', fn1, false);*/
//告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);*/
oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
//
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
事件函数取消
第一种事件绑定形式的取消
function fn1() {
alert(1);
}
function fn2() {
alert(2);
}
//document.onclick = fn1;
//document.onclick = null; //取消
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
document.detachEvent('onclick', fn1);
document.addEventListener('click', fn1, false);
document.addEventListener('click', fn1, true);
document.addEventListener('click', fn2, false);
document.removeEventListener('click', fn1, false);
键盘事件
onkeydown 当键盘按键按下的时候触发
onkeyup 当键盘按键抬起的时候触发
event.keyCode 数字类型 键盘按键的键值
ctrlKey
shiftKey
altKey
布尔值 事件发生三个键的状态
留言本
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1');
oText.onkeyup = function(ev) {
var ev = ev || event;
//alert(this.value);
if ( this.value != '' ) {
if (ev.keyCode == 13 && ev.ctrlKey) {
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
}
}
}
}
</script>
</head>
<body>
<input type="text" id="text1" />
<ul id="ul1"></ul>
</body>
</html>
键盘控制div移动
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
//不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件
//onkeydown : 如果按下不抬起，那么会连续触发
//定时器
document.onkeydown = function(ev) {
var ev = ev || event;
switch(ev.keyCode) {
case 37:
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
break;
case 38:
oDiv.style.top = oDiv.offsetTop - 10 + 'px';
break;
case 39:
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
break;
case 40:
oDiv.style.top = oDiv.offsetTop + 10 + 'px';
break;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
事件默认行为
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;
*/
document.onkeydown = function() {
return false;
}
//oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
document.oncontextmenu = function() {
//alert(1)
return false;
}
</script>
</head>
<body style="height: 2000px;">
</body>
</html>
右键菜单
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
document.oncontextmenu = function(ev) {
var ev = ev || event;
oDiv.style.display = 'block';
oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + 'px';
return false;
}
document.onclick = function() {
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
