JS事件流，事件绑定

事件流，事件绑定

	主流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))