DOM事件模型

例一：

image.png

为什么A不对？因为在html中onclick=" " 接的是要执行的代码，你直接给一个print是什么意思，执行个毛。而B，C给的是函数，理解为当点击后执行对应的函数。

例二：

image.png

print的类型为对象
print() 函数如果没有return返回值是Undefined

例三：

HTML代码

<button id="xxx">xxx</button>

JS代码：

//第一种写法
xxx.addEventListener('click',function(){
  console.log(1)
})
//第二种写法
xxx.onclick=funtion(){
console.log(2)
}
xxx.onclick=function('click',funtion(){
console.log(3)
})

这两种写法有何区别？第二种写法是xxx的一个属性，属性意味着可以被覆盖，比如这时候我在写一个console.log(3),这个时候他只会执行3,而把2覆盖了，所以这是一个非常不好的模型，因为会被覆盖，比如我同事写了一个事件A，我又写了一个事件B，结果他的A就不会被执行了。于是有了addEventListener(事件监听队列)

____________________________________________________

addEventListener

1.addEventListener 队列模型，特点“先进先出”, 队列的实质是：数组

JS代码

xxx.addEventListener('click',function(){
  console.log(1)
})
xxx.addEventListener('click',function(){
  console.log(2)
})

结果： 先打印1 再打印2 符合“先进先出”

2.remove 也是队列模型

JS代码

function f1(){
  console.log(1)
}
function f2(){
  console.log(2)
}
function f3(){
  console.log(3)
}
xxx.addEventListener('click', f1)
xxx.addEventListener('click', f2)
xxx.removeEventListener('click', f1)
xxx.addEventListener('click', f3)
xxx.removeEventListener('click', f3)

当点击xxx时，会打印出几？ 答案：2

3.one是如何实现的？

以下是one的实现过程

function f1(){
  console.log(1)
  xxx.removeEventListener('click', f1)
}

xxx.addEventListener('click', f1)

4.当点击儿子的时候

image.png

问题一：当点击儿子的时候他们触发的顺序是怎样的？

情况一：w3c说都可以，默认情况下也就是不传值或者传falsy值（false,0,NaN,'',undefined,null）的时候，执行的顺序是儿子爸爸爷爷

情况二：如果他们三个都传true值，则爷爷爸爸儿子

情况三：即有true又有false 先捕获再冒泡

image.png

默认是从下到上也就是冒泡。如果传true值就跑到左边，并且每个函数只会执行一次，要么冒泡执行要么捕获时执行

image.png

打印出 爸爸 儿子爷爷

问题二：如果在儿子身上既传false ，又传true值 ，则先写哪个先执行哪个，跟传的值无关

image.png

先打印捕获，然后是冒泡