一、什么是DOM
DOM文档对象模型,以根元素开头展开成一颗树,描述了处理网页内容的方法和接口。最根本对象是document(window.document)。
二、DOM事件
事件是触发响应的机制。例如,click就是一个事件,可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身。事件并不是只是在一处被触发和终止;他们在整个document中流动,拥有它们自己的生命周期。
三、DOM事件模型和DOM事件机制
DOM事件发生时会在元素节点之间按照特定的顺序传播。
DOM事件模型就是对每个事件先捕获再冒泡。
举例,图中
td被点击,其上节点tr到window都可以加上onclick事件去执行函数。函数执行顺序分两种,从window到tr定义为捕获,从tr到window定义为冒泡。
四、冒泡与俘获
1.捕获:当用户点击按钮,浏览器会从 window 从上向下遍历至用户点击的按钮,逐个触发事件处理函数。
2.冒泡: 浏览器从用户点击的按钮从下往上遍历至 window,逐个触发事件处理函数。
3.onclick和attachEvent只能得到冒泡阶段
4.当第三个参数为true,则为捕获,默认或为false为冒泡
addEventListener(type,listener[,bool]
4.有些事件没有冒泡,如onblur,onfocus,onmouseenter,onmouseleave
五、阻止冒泡
1. 标准写法
e.stopPropagation()
2.非标准
e.cancelBubble=true
3.兼容性解决
if(e&&e.stopPropagation){
e.stopPrppation();
}else {
window.event.cancelBubble=true;
}