事件基础(2)

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

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

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


**dom结构
parent
child

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;
}

你可能感兴趣的:(事件基础(2))