事件流

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

就是这样的类型

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>

  

猜你喜欢

转载自www.cnblogs.com/max-hou/p/9055106.html