前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

W3C标准是万维网联盟,

其他的可以参考万维网版本的更新内容

一、W3C标准

二、W3C DOM事件

三、冒泡事件

四、捕获事件

五、对比分析

一、W3C标准

其实网页是由三分部组成:1、结构(structure),2、表现(prentation),3、行为(behavior)

对应的标准也分为三部分:1、结构化标准语言,主要包括xml和xhtml;2、表现标准语言,主要包括css;3、行为标准语言主要包括对象模型(W3C DOM)和ECMAScript。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

1、结构化标准语言,主要包含可扩展标记语言(XML)和可扩展超文本标记语言(XHTML)。

xml设计之初是为了补充html的,但是随着xml满足网络信息发布的需要,逐渐应用在数据的转换和描述上。xml数据转换功能十分强大,但是在面对成千上万个站点信息直接使用xml还不行,所以引入XHTML,目的是为了把html向xml过渡。

2、表现标准语言,主要是包含css样式。主流浏览器正在逐渐支持,程序员也开始利用CSS3代替以往冗长的旧代码。使用css和xhtml是为了让把结构和样式进行分离,便于代码的维护。

3、行为标准语言,主要包好对象模型(W3C DOM)和ECMAScript。DOM是一种与浏览器,平台,语言的接口。解决了设计师和web开发者提供一个标准,让他们访问站点中的数据,脚本,表现层对象。ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。现推荐遵循的是ECMAScript 262

二、冒泡事件模型

什么是冒泡事件,在面试中面试官经常会问你相关的一些前端的开发基本功,现在自己总结一下,

答:冒泡事件就是从最精确的目标(target)到最不精确的目标进行顺序触发。

三、事件捕获模型

什么是事件捕获?

答:事件捕获是从最不精确的目标到最精确的目标进行顺序触发。

四、W3C DOM对象模型

什么是DOM对象模型?

答:DOM对象模型是包含了“冒泡事件“和“事件捕获”这两个事件模型。两种事件流会触及所有的对象,从document开始,到document结束。

五、 对比分析:

1、支持W3C标准的浏览器的给元素添加事件的方法,使用addeventListener函数,使用样例addEventListener(event,fn,useCapture)来设置事件是在冒泡时执行还是在事件捕获时执行。第三个参数使用布尔型,true或者false来表示;

使用true,意思就是事件捕获

使用false,意思就是冒泡事件

2、不支持W3C标准的浏览器(IE)给元素添加事件方法,使用attachevent函数,使用样例attachevent(event,fn),默认的是false,起到了兼容浏览器效果,也就是说,IE浏览器只支持事件冒泡。

看这张图就很清楚了事件捕获和冒泡原型。

前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

3、事件捕获阶段:事件从最上一级的标签开始查找,直到捕获事件目标

事件冒泡阶段:事件从事件目标开始,往上冒泡直到页面的最上一级标签

4、举一个例子

<div>
  <p>点我看效果</p>
</div>

这两个元素都绑定了click事件,如果用户点击了p元素,他在div和p元素上都触碰了click事件,那么先执行哪一个事件(事件处理顺序)?

 事件捕获

当你使用事件捕获时,父级元素先触发,子级元素后触发,也就是说div先触发,p后触发。

事件冒泡

当你使用事件冒泡时,子级元素先触发,父级元素后出发,也就是说p先触发,div后触发。

W3C模型

在W3C模型中,任何事件发生,都是从*元素开始进行事件捕获,直到事件到达事件源元素。然后,再从事件源元素往上进行事件冒泡,直到到达document。采用的方法是addeventListener函数,

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统的绑定事件方式

ele.onclick = doSomething2

这种绑定方式,采用的是冒泡事件

IE浏览器

IE只支持事件冒泡,不支持事件捕获,不支持addeventListener函数,她提供了另外一个函数attachevent。

ele.attachEvent("onclick", doSomething2);

上一篇:解决LINUX下SQLPLUS时上下左右键乱码问题


下一篇:Linux超快速安装Ruby on Rails