事件流

作者: TimeLesser | 来源:发表于2016-04-21 10:30 被阅读26次

手写事件模型及事件代理/委托
JavaScript事件探秘
事件
JavaScript事件捕获冒泡与捕获
事件流and事件处理程序
JS--事件（一）
事件
JavaScript事件01——事件流
事件基础（2）
事件

事件冒泡
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层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>