DOM級(jí)別與DOM事件

DOM級(jí)別：DOM0級(jí)，DOM1級(jí)，DOM2級(jí)和DOM3級(jí)
DOM事件：DOM0級(jí)事件處理，DOM2級(jí)事件處理和DOM3級(jí)事件處理
（1級(jí)DOM標(biāo)準(zhǔn)中沒有定義事件相關(guān)內(nèi)容）
目前最廣泛標(biāo)準(zhǔn)是 DOM2。

DOM level 0

<button id=X onclick="print"></button>
<button id=Y onclick="print()"></button> 
<button id=Z onclick="print.call()"></button> 

<script>
   function print(){
     console.log('hi')
   }
   
    X.onclick = print 
    Y.onclick = print()
    Z.onclick = print.call()
</script>

請(qǐng)問上面哪幾個(gè)能打印出 ‘hi’

<button id=Y onclick="print()"></button> 
<button id=Z onclick="print.call()"></button> 

X.onclick = print 

onclick = "要執(zhí)行的代碼”
用戶一旦點(diǎn)擊，瀏覽器就 eval("要執(zhí)行的代碼") 即 eval("print")

function print(){
    console.log('hi')
}
eval('print') // ? print(){console.log('hi')}
eval('print()') // hi
eval('print.call()') // hi

X.onclick = print // 類型為 函數(shù)對(duì)象
// 一旦用戶點(diǎn)擊，瀏覽器就執(zhí)行 X.onclick.call(X,{})  
// X.onclick 需要一個(gè)函數(shù)

DOM level 2

<button id=X >X</button>

<script>
  X.addEventListener('click',function(){console.log('1)}) // 1
  X.onclick = function(){console.log('2')} 
  
// 兩者的區(qū)別，后面的是一個(gè)屬性，是唯一的，后面的會(huì)覆蓋前面的
// 前者是一個(gè)隊(duì)列模型，先進(jìn)先出，函數(shù)會(huì)依次觸發(fā)

</script>

function f1(){console.log(1)}
function f2(){console.log(2)}

X.addEventListener('click',f1)
X.addEventListener('click',f2)
// 1
// 2
X.removeEventListener('click',f1)
// 2

DOM事件流

addEventListener的第三個(gè)參數(shù)為指定事件是否在捕獲階段執(zhí)行，設(shè)置為true表示事件在捕獲階段執(zhí)行，而設(shè)置為false表示事件在冒泡階段執(zhí)行。

<div class="grand1">
  爺爺
  <div class="parent">
    爸爸
    <div class="child">
      兒子
    </div>
  </div>
</div>

<script>
// 當(dāng)點(diǎn)擊了兒子之后，是否點(diǎn)擊了爸爸和爺爺
// yes

// 當(dāng)點(diǎn)擊兒子之后，三個(gè)函數(shù)是否調(diào)用
grand1.addEventListener('click',function f1(){
  console.log('爺爺')
})
parent1.addEventListener('click',function f2(){
  console.log('爸爸')
})
child1.addEventListener('click',function f3(){
  console.log('兒子')
})

// 請(qǐng)問 f1 f2 f3執(zhí)行順序
// 1 2 3 or 3 2 1

// 都可以
// 傳第三個(gè)參數(shù)值為 false / null / NaN / '' / 0 / undefined / 或者默認(rèn)不傳值
grand1.addEventListener('click',function f1(){
  console.log('爺爺')
})
parent1.addEventListener('click',function f2(){
  console.log('爸爸')
})
child1.addEventListener('click',function f3(){
  console.log('兒子')
})
// 執(zhí)行順序?yàn)?3 2 1
// 兒子 爸爸 爺爺

// 傳第三個(gè)參數(shù)為 ture
grand1.addEventListener('click',function f1(){
  console.log('爺爺')
},true)
parent1.addEventListener('click',function f2(){
  console.log('爸爸')
},true)
child1.addEventListener('click',function f3(){
  console.log('兒子')
},true)
// 執(zhí)行順序?yàn)?1 2 3
// 爺爺 爸爸 兒子