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