事件流

事件冒泡：事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流的默认类型，被绝大多数浏览器支持。

就是这样的类型

element.addEventListener(‘event’,function,false);

事件捕获：事件从最宽泛的节点开始向内传播到最具体的节点。

就是这样的类型

element.addEventListener(‘event’,function,true);

事件冒泡示例

<body>
<ul id="ul">
    <li id="li"><a id="a">豆浆</a></li>
</ul>

<script>
    var ela=document.getElementById("a");
    ela.addEventListener("click",getEvent,false);
    var elli=document.getElementById("li");
    elli.addEventListener("click",getEvent,false);
    var elul=document.getElementById("ul",getEvent,false);
    elul.addEventListener("click",getEvent,false);

    function getEvent() {
        alert(this.innerHTML)
    }
</script>

</body>

　　事件捕获示例

<body>
<ul id="ul">
    <li id="li"><a id="a">豆浆</a></li>
</ul>

<script>
    var ela=document.getElementById("a");
    ela.addEventListener("click",G,true);
    var elli=document.getElementById('li');
    elli.addEventListener("click",G,true);
    var elul=document.getElementById("ul");
    elul.addEventListener("click",G,true);

    function G() {
        alert(this.innerHTML)
    }
</script>
</body>

　　

posted @ 2018-05-18 10:51  麦克斯-侯  阅读(126)  评论(0)  编辑  收藏  举报
百纵科技