DOM事件

历史

level0 onclick,onerror,onload,onmouseenter
level1 1998,2000
DOM Core 结构，string
DOM HTML HTMLCollection
HTMLdocument
Element对象
事件：blur,click,focus,select

image.png

image.png

答案：bcx
html中onclick=“要执行的代码” //用户一旦点击，浏览器就eval(“要执行的代码”)
js中用户点击，浏览器就执行x.onclick.call(x,{})
print 类型为函数，print()类型为undefined

level2

每个事件是一个队列。
1..onclick=function(){} //是属性，只能绑一个函数
2..addEventListener('click', function(){}) //队列eventListeners,同一元素的事件先绑定先执行
3..removeEventListener('click',function(){}) //解绑,触发前就失效

捕获冒泡

点击儿子

image.png

第三个参数true 在捕获队列执行,默认false冒泡
先捕获后冒泡

事件模型.png

（被点击的元素）儿子的捕获冒泡执行顺序按照代码顺序执行

image.png

一些事件

点击别处关闭浮层
1.e.stopPropagation阻止冒泡

image.png

image.png

2.延迟添加事件

image.png

点击一次从内往外上色：

image.png