事件冒泡
事件捕获
事件冒泡
<div>
<body> document.body
<html> document.documentElement
document document
IE5.5及更早版本中的事件冒泡会跳过<html>元素。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="myBtn">click</button> <script> var btn = document.getElementById('myBtn') /** * 使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。 * 因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this 引用当前元素 */ btn.onclick = function() { console.log(this.id) } btn.onclick = null /** * addEventListener removeEventListener DOM2级事件 * * attachEvent detachEvent * 在使用 attachEvent() 方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window * * 这里调用了两次attachEvent() ，为同一个按钮添加了两个不同的事件处理程序。 * 不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发 */ /** * 事件捕获阶段 处于目标阶段 事件冒泡阶段 */ btn.onclick = function(event) { console.log('btn', event.eventPhase) // 2 } document.body.addEventListener('click', function(event) { console.log('body true', event.eventPhase) // 1 }, true) document.body.onclick = function(event) { console.log('body', event.eventPhase) // 3 } </script> </body> </html>