zoukankan      html  css  js  c++  java
  • 前端基本知识(一):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浏览器只支持事件冒泡。

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

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

  • 相关阅读:
    网站性能在线评估
    如何测试电梯/伞/桌子/笔?
    apk反编译查看源码
    Jmeter(四)-断言/检查点
    【转】Jmeter(三)-简单的HTTP请求(非录制)
    【转】Jmeter(二)-使用代理录制脚本
    [转]Jmeter(一)-精简测试脚本
    CentOS 安装以及配置Apache php mysql
    centOS静态ip设置
    免费DDOS攻击测试工具大合集
  • 原文地址:https://www.cnblogs.com/chengxs/p/6388779.html
Copyright © 2011-2022 走看看