dom事件委托和 dom0 dom3

<! DOCTYPE html >

< html lang = "en" >

 

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >

< title > Document </ title >

</ head >

 

< body >

< ul id = "haha" >

< li > a </ li >

< li > b </ li >

< li > c </ li >

< li > d </ li >

< li > e </ li >

</ ul >

 

< script >

// js原生时间委托

var a = document . getElementById ( 'haha' )

haha . addEventListener ( 'click' , function ( e ) {

if ( e . target . tagName === 'LI' ||

e . target . parentNode . tagName === 'LI' ) {

console . log ( 'ok！' )

}

})

 

 

Dom0 和dom2

Dom0

同一个元素，后面的绑定的事件会覆盖前面的

只有冒泡阶段

通过置换null click 解除绑定  $dom.οnclick=null

$dom.onclick = function(){this == domEle}

Dom2

同一个元素可以进行多事件绑定。

默认冒泡 

Chrome

  $dom.addEventListener(type,fn,false);

移除

  $dom.removeEventListener(type,fn,false);

同一事件绑定多个函数，函数顺序执行；

IE9

  $dom.attachEvent(type,dn,false);

$dom.detachEvent(type,dn,false);

同一事件绑定多个fn，写在后面的先执行。

 

 

 

< / script >

</ body >

 

</ html >