美文网首页
事件基础(2)

事件基础(2)

作者: strong9527 | 来源:发表于2016-08-10 22:14 被阅读16次

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

    相关文章

      网友评论

          本文标题:事件基础(2)

          本文链接:https://www.haomeiwen.com/subject/tapjsttx.html