DOM事件模型

181 阅读1分钟

一、什么是DOM

DOM文档对象模型,以根元素开头展开成一颗树,描述了处理网页内容的方法和接口。最根本对象是document(window.document)。

二、DOM事件

事件是触发响应的机制。例如,click就是一个事件,可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身。事件并不是只是在一处被触发和终止;他们在整个document中流动,拥有它们自己的生命周期。

三、DOM事件模型和DOM事件机制

DOM事件发生时会在元素节点之间按照特定的顺序传播。 DOM事件模型就是对每个事件先捕获再冒泡。 DOM事件 举例,图中td被点击,其上节点trwindow都可以加上onclick事件去执行函数。函数执行顺序分两种,从windowtr定义为捕获,从trwindow定义为冒泡。

四、冒泡与俘获

1.捕获:当用户点击按钮,浏览器会从 window 从上向下遍历至用户点击的按钮,逐个触发事件处理函数。

2.冒泡: 浏览器从用户点击的按钮从下往上遍历至 window,逐个触发事件处理函数。

3.onclickattachEvent只能得到冒泡阶段

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;
     }