DOM事件

DOM级别与DOM事件

DOM级别：DOM0级，DOM1级，DOM2级和DOM3级
DOM事件：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理
（1级DOM标准中没有定义事件相关内容）
目前最广泛标准是 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>

请问上面哪几个能打印出 ‘hi’

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

X.onclick = print 

onclick = "要执行的代码”
用户一旦点击，浏览器就 eval("要执行的代码") 即 eval("print")

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

X.onclick = print // 类型为 函数对象
// 一旦用户点击，浏览器就执行 X.onclick.call(X,{})  
// X.onclick 需要一个函数

DOM level 2

<button id=X >X</button>

<script>
  X.addEventListener('click',function(){console.log('1)}) // 1
  X.onclick = function(){console.log('2')} 
  
// 两者的区别，后面的是一个属性，是唯一的，后面的会覆盖前面的
// 前者是一个队列模型，先进先出，函数会依次触发

</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的第三个参数为指定事件是否在捕获阶段执行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。

<div class="grand1">
  爷爷
  <div class="parent">
    爸爸
    <div class="child">
      儿子
    </div>
  </div>
</div>

<script>
// 当点击了儿子之后，是否点击了爸爸和爷爷
// yes

// 当点击儿子之后，三个函数是否调用
grand1.addEventListener('click',function f1(){
  console.log('爷爷')
})
parent1.addEventListener('click',function f2(){
  console.log('爸爸')
})
child1.addEventListener('click',function f3(){
  console.log('儿子')
})

// 请问 f1 f2 f3执行顺序
// 1 2 3 or 3 2 1

// 都可以
// 传第三个参数值为 false / null / NaN / '' / 0 / undefined / 或者默认不传值
grand1.addEventListener('click',function f1(){
  console.log('爷爷')
})
parent1.addEventListener('click',function f2(){
  console.log('爸爸')
})
child1.addEventListener('click',function f3(){
  console.log('儿子')
})
// 执行顺序为 3 2 1
// 儿子 爸爸 爷爷

// 传第三个参数为 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)
// 执行顺序为 1 2 3
// 爷爷 爸爸 儿子