事件流,事件绑定
| 主流browser,符合W3C标准,支持冒泡和捕获 | 低版本ie,仅支持冒泡 |
冒泡到 | window | document |
事件绑定/解绑 | elem.addEventListener(evt, func, useCapture) elem.removeEventListener(evt, func) | elem.attachEvent(onevt, func) elem.detachEvent(onevt, func) |
阻止事件流 | e.stopPropagation() //阻止传播(捕获+冒泡) (部分也兼容了ie) | window.event.cancelBubble //阻止冒泡 |
阻止默认事件 | e.preventDefault() | window.event.returnValue = false |
DOM2级事件事件流:
三个阶段:捕获、处于、冒泡
document.getElementById('daddy').addEventListener('click',function(){console.log('daddy')}, true); //捕获阶段触发
document.getElementById('child').addEventListener('click',function(e){console.log('child')}, false); //冒泡阶段触发
document.getElementById('grandchild ').addEventListener('click',function(){console.log('grandchild ')}, true); //捕获阶段触发
输出:daddy, grandchild, child;
target, currentTarget和this
举个栗子就好明白了
document.getElementById('parentNode').addEventListener('click',function(e){
var t1 = e.target //实际触发事件的对象, childNode
var t2 = e.currentTarget //绑定事件的对象, parentNode
var t3 = this; //一般情况下===currentTarget, 此case下为obj
}.bind(obj))