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