事件基础(2)

2016-08-10  本文已影响16人  strong9527

js事件的三个阶段:捕获,目标,冒泡

IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流

IE事件流 叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档)。事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播。


**dom结构
<div id="parent">
       parent
        <div id="child">
            child
        </div>
</div>


js捕获,捕获,冒泡实验,

var child = document.getElementById("child");
var parent = document.getElementById('parent');
child.addEventListener('click',function(){
    console.log("child 捕获");
},true)

child.addEventListener('click',function(){
    console.log("child 冒泡");
},false)

parent.addEventListener('click',function(){
    console.log('parent 捕获')
},true);

parent.addEventListener('click',function(){
    console.log('parent 冒泡')
},false);


当点击 child DOM 时

输出:
                parent 捕获
                child 捕获
                child 冒泡
                parent 冒泡

点击 parent DOM 时

输出:
parent 捕获
parent 冒泡

阻止默认事件兼容代码书写

input.onclick = function(s){
    var e = s || window.event  ;
    e.returnValue = false;
    e.preventDefault();
    return false;
}

上一篇下一篇

猜你喜欢

热点阅读