江湖开发者 | Java粉
网站地图
首页> web前端> js addEventListener事件流
2016
12-07

js addEventListener事件流

js addEventListener事件流

函数:e.preentDefault(); 可以阻止事件的默认行为

一个事件的生命周期包括三个阶段:Event.eventPhase

捕捉(capture)

目标(target)

冒泡(bubbling)

addEventListener("click",function(e){},false); //第三个参数,默认是false(冒泡模型),ture(捕捉模型)


事件的生命周期,有助于理解事件的执行顺序,有效地使用e.stopPropagation(或e.stopImmediatePropagation)阻止事件的前进

stopPropagation和stopImmediatePropagation的区别在于,stopPropagation会确保调用当前元素上注册的所有事件监听器,

而stopImmediatePropagation会忽略任何未触发的监听器(一个元素可绑定多个监听器)。

1.理解捕捉阶段


当某个事件被触发时,浏览器会找出事件涉及的元素,它被称为该事件的目标。浏览器会找出body元素和目标之间的所有元素并分别检查它们,看看它们是否带有事件处理器且要求获得其后代元素触发事件的通知.浏览器会先触发这些事件处理器,然后才会轮到目标自身的处理器。


2.理解目标阶段

当捕捉阶段完成后,浏览器会触发目标元素上的任何已添加的事件类型监听器。

3.理解冒泡阶段

完成目标阶段之后,浏览器开始转而沿着上级元素链朝body元素前进。在沿途的每个元素上,浏览器都会检查是否存在针对该事件类型但没有启用捕捉的监听器(也就是说,addEventListener函数的第三个参数是false)。这就是所谓事件冒泡。


元素树形结构: body > one > two > three 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #one{
            height: 300px;width: 300px;margin: 0 auto;background: green;
        }
        #two{
            height: 200px;width:200px;background: blue;position: relative;top: 50px;left: 50px;
        }
        #three{
            height:100px;width:100px;background: red;position: relative;top: 50px;left: 50px;
        }

    </style>
</head>
<body>

<div id="one">
    <div id="two">
            <div id="three"></div>
    </div>
</div>


<script type="text/javascript">

    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");

    one.addEventListener("click",oneClick,false);
    two.addEventListener("click",twoClick,true);
    three.addEventListener("click",threeClick,false);

//  事件的捕捉是捕捉其子元素,boby与其子元素的任意元素有e.stopPropagation();可阻止子元素事件的执行

    //e.target   鼠标所在的子元素
    //e.currentTarget  被绑定事件的元素
 function  oneClick(e){

       if(e.eventPhase == Event.CAPTURING_PHASE){    //事件的捕捉阶段
 console.info("oneClick事件捕捉阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id );

       }else if(e.eventPhase ==Event.BUBBLING_PHASE){ //事件的冒泡阶段
 console.info("oneClick事件的冒泡阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);

       }else if(e.eventPhase == Event.AT_TARGET){     //事件的目标阶段
 console.info("oneClick事件的目标阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);
       }else{
           alert("不会被执行!");
       }

//        e.stopPropagation();
//        e.stopImmediatePropagation();

 }


    function  twoClick(e){
        if(e.eventPhase == Event.CAPTURING_PHASE){    //事件的捕捉阶段
 console.info("twoClick事件捕捉阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id );

        }else if(e.eventPhase ==Event.BUBBLING_PHASE){ //事件的冒泡阶段
 console.info("twoClick事件的冒泡阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);

        }else if(e.eventPhase == Event.AT_TARGET){     //事件的目标阶段
 console.info("twoClick事件的目标阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);
        }else{
            alert("不会被执行!");
        }
//        e.stopPropagation();

 }


    function threeClick(e){

        if(e.eventPhase == Event.CAPTURING_PHASE){    //事件的捕捉阶段
 console.info("threeClick事件捕捉阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id );
        }else if(e.eventPhase ==Event.BUBBLING_PHASE){ //事件的冒泡阶段
 console.info("threeClick事件的冒泡阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);
        }else if(e.eventPhase == Event.AT_TARGET){     //事件的目标阶段
 console.info("threeClick事件的目标阶段 target:"+ e.target.id+",currentTarget:"+ e.currentTarget.id);
        }else{
            alert("不会被执行!");
        }
//        e.stopPropagation();
 }

</script>
</body>
</html>

   click.png 

当one,two,three三个元素的事件监听第三个参数为false时(冒泡模型)点击three时执行顺序是由内到外 threeClick(),twoClick(),oneClick();  

click_1.png

当one,two,three三个元素的事件监听第三个参数为true时(捕捉模型)点击three时执行顺序是由外到内 oneClick(),twoClick(),threeClick(); 

   click_2.png

当two为捕捉模型,one 和 three为冒泡模型时,点击three时

    click_3.png

事件委拖也称事件代理

利用冒泡模型的特点把事件加到父级上

当去掉two 和three的绑定事件的时候点击two和three也会触发父元素A的click();


可以减少内存操作,dom重绘,提高性能


Java江湖     
全部评论:

表情验证码,看不清楚,换一张

随机文章

云标签

公众号

微信

分享:分享我们的知识;专注:专注个人技术的提升;