JavaScript与HTML的交互是通过事件实现的,事件代表文档流或浏览器窗口中某个有意义的时刻。
而事件流代表了页面接收事件的顺序,结果IE和Netscape开发团队提出了几乎完全相反的事件流方案,IE将支持事件冒泡流,而Netscape将支持事件捕获流。
事件冒泡
IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播,看一下以下示例:
<body onclick="bodyclick( )">
<div onclick="divclick( )">
<button onclick="buttonclick( )">
</button>
</div>
</body>
<script>
function bodyclick(){
console.log('body被点击')
}
function divclick(){
console.log('div被点击')
}
function buttonclick(){
console.log('button被点击')
}
</script>
点击页面上的button
:
事件捕获
网景公司提出的事件流叫事件捕获流。事件捕获流的思想是外层DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件,针对上面同样的例子,点击按钮,那么此时click事件会按照这样传播:(下面我们就借用addEventLi