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