dom事件流 | 易学教程

有关Dom的一些操作

阅读更多关于有关Dom的一些操作

　　　学习前端的都会了解到一些Dom操作，让我们来看看Dom操作有哪些吧! 　　　　　　DOM(即 Document Object Mode) 是 W3C（万维网联盟）的标准。　　DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” 　　W3C DOM 标准被分为 3 个不同的部分：　核心 DOM - 针对任何结构化文档的标准模型　XML DOM - 针对 XML 文档的标准模型　HTML DOM - 针对 HTML 文档的标准模型　　　　其中，在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。　　根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：　整个文档是一个文档节点　每个 HTML 元素是元素节点　HTML 元素内的文本是文本节点　每个 HTML 属性是属性节点　注释是注释节点　　　　　　 HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。　　　怎样添加、移除、移动、复制、创建和查找节点。　　　　

Javascript学习笔记2.1 Javascript与DOM简介

阅读更多关于 Javascript学习笔记2.1 Javascript与DOM简介

DOM（文档对象模型）简介 DOM（文档对象模型）针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构，它是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。 Javascript通常都是用来进行DOM操作和交互的。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。以下讨论的是HTML DOM。每一个网页元素（一个HTML标签）被看做一个对象。文档对象模型通常被理解成一棵树的形状。树根是document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话

DOM事件

阅读更多关于 DOM事件

DOM事件类　　　　基本概念：DOM事件的级别　　　　DOM事件模型　　　　DOM事件流　　　　描述DOM事件捕获的具体流程　　　　Event对象的常见应用　　　　自定义事件 1.事件级别 DOM0 element.onclick=function(){} DOM1 element.addEventListener('click',function(){},false) DOM3(增加了多种事件类型，比如鼠标事件，键盘事件) element.addEventListener('keyup',function(){},false) DOM事件模型就是冒泡和捕获两种，捕获是从上往下，冒泡是从当前元素也就是目标元素往上。 DOM事件流第一阶段：捕获第二阶段：目标阶段第三阶段：冒泡描述DOM事件捕获的具体流程（冒泡相反） (补充：document.documentElement获取html这个节点）第一个接收到的对象是window，然后传给document，再传给html，再传给目标元素的父级元素，然后传给目标元素。 Event对象的常见应用　　event.preventDefault() 　　event.stopPropagation() 　　event.stopImmediatePropagation() 　　event.currentTarget 　

DOM 事件模型

阅读更多关于 DOM 事件模型

事件 HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。 DOM事件流 DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。主流浏览器的事件模型早在2004前在HTML元素事件的订阅，发送，传播，处理模型上各浏览器实现并不一致，直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。冒泡型事件(Bubbling) 这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点

DOM事件模型

阅读更多关于 DOM事件模型

DOM 　　首先，DOM全称是Document Object Model，即文档对象模型。DOM是W3C的标准，定义了访问 HTML 和 XML 文档的标准。 “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” DOM事件　　DOM使Javascript有能力对HTML上的事件做出反应。这些事件包括鼠标键盘的点击事件、移动事件以及页面中内容的变化等。HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。 DOM事件流　　DOM的结构是一个树形，每当HTML元素产生事件时，该事件就会在树的根节点和元素节点之间传播，所有经过的节点都会收到该事件。 DOM事件模型　　DOM事件模型分为两类：一类是IE所使用的冒泡型事件（Bubbling）；另一类是DOM标准定义的冒泡型与捕获型（Capture）的事件。除IE外的其他浏览器都支持标准的DOM事件处理模型。　　冒泡型事件处理模型（Bubbling）　　如上图所示，冒泡型事件处理模型在事件发生时，首先在最精确的元素上触发，然后向上传播，直到根节点。反映到DOM树上就是事件从叶子节点传播到根节点。捕获型事件处理模型（Captrue）

事件冒泡的应用

阅读更多关于事件冒泡的应用

DOM事件流：“DOM二级事件”规定的事件流包含三个阶段：事件捕获，处于目标，事件冒泡。事件捕获：不太具体的节点先捕获接收到事件，然后传递到具体的节点。事件冒泡：事件开始时由最具体的元素接收，然后逐级上上传播到最不具体的节点。那么，事件冒泡有什么作用呢？首先，我们页面里有很多DOM事件有处理程序。比如说： <body> <div class="box" style="width:100px;height:"100px";" oncick="fn1"></div> <script> function fn1(){ alert("点击事件") } </script> </body> 那么，如果我有很多DOM元素需要添加事件处理程序呢？比如说，我有100个li元素需要添加事件处理程序呢？难道一个一个添加吗？ <style type="text/css"> #outSide{ width: 540px; padding: 20px; background: lightblue; margin: 0 auto; } #outSide li{ width: 500px; height: 50px; background: lightcoral; border: 1px solid lightgoldenrodyellow; } </style> <body> <ul> <li

javaScript系列 [28]

阅读更多关于 javaScript系列 [28]

本文介绍JavaScript事件相关的知识点，主要包括事件流、事件处理程序、事件对象(event)以及常见事件类型和事件委托等相关内容。在网页开发涉及的三种基础技术( HTML CSS JavaScript )中，JavaScript主要负责处理页面的行为，而所谓行为大多指的是交互行为。 JavaScript和HTML间的交互通过事件来实现，换句话来说事件其实就是页面文档或浏览器窗口中发生的特定交互，譬如页面中的按钮标签被点击我们称之为按钮的点击( click )事件，类似的还有页面加载事件、鼠标的移入移除等等。通常,我们在开发中对事件的操作(处理)主要由两部分组成，即事件注册和事件函数。我们总是需要先通过特定的方式来给标签添加(注册)事件监听，当事件发生时事件函数将得以调用执行。本文以能够清晰明确的把事件的传递过程、事件注册的方式、事件对象以及常见的事件类型讲解清楚为目标。事件流事件流描述的其实是事件内在的传递过程(顺序)。我们的开发经验是，当我们给某些标签注册(绑定)了事件后，该事件被触发就会执行对应的事件处理函数。这似乎是一个顺理成章的经验，但事件到底是如何传递的呢？我们知道在网页中有很多的Node节点，而Node节点之间是复杂的树结构，事件在接收、传递和处理的时候，是按照目标节点->上层节点->根节点还是根节点->下层节点-

DOM事件模型

阅读更多关于 DOM事件模型

一、事件流　　事件流描述的是从页面中接收事件的顺序。IE和网景团队提出流相反的事件流概念。IE事件流是事件冒泡流，而网景是事件捕获流。二、事件冒泡　　IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点。　　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> 点我点我 </div> </body> </html> 如果你单击了div元素，那么click事件会按照如下事件传播 <div> <body> <html> document 点击元素会从最具体的元素向上传播。所有现代浏览器都支持事件冒泡，但是具体实现还是有些差别，IE5.5及更早版本的事件会跳过<html>元素。三、事件捕获网景公司提出的另一个事件流叫做事件捕获，事件捕获的思想上不太具体的节点应该更早接收到事件，而最具体的元素应该最后接收到事件，事件捕获的目的的事件到达预期目标之前捕获它。之前的例子来说就是 document html body div 由于老版的浏览器不支持事件捕获，所以我们一般使用的都是事件冒泡。四、DOM事件流 DOM2级规定的事件流包含三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段

面试准备 DOM

阅读更多关于面试准备 DOM

基本概念：Dom事件的级别 Dom0 级别 element.onclick=function() {} Dom1 没有制定事件相关的 Dom2 element.addEventListener("click" function() {} , false//捕获还是冒泡) Dom3 element.addEventListener("keyup" function() {} , false//捕获还是冒泡) 新增鼠键盘事件 DOM事件模型：捕获冒泡捕获：从上往下冒泡：当前元素往上 DOM事件流浏览器在为当前页面与用户交互比如鼠标左键响应如何传到页面响应 1.事件通过捕获 2.目标元素（目标阶段） 3.上传到window对象（冒泡） DOM事件捕获的具体流程第一个接受到事件的对象 window -----document-----html标签----body---父级元素--子---目标元素 Event对象的常见应用 // 1事件原理 2怎么注册监听 3响应event常见应用 event.preventDefault()阻止默认事件 event.stopPropagation() 阻止冒泡 event。stopimmediatePropagation（）两个click事件 A中注册这个阻止Bclick事件 event.currentTarget /

DOM事件流的三个阶段

阅读更多关于 DOM事件流的三个阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 DOM事件流分为三个阶段，分别为：捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；目标阶段：真正的目标节点正在处理事件的阶段；冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。捕获阶段： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .father { 11 overflow: hidden; 12 width: 300px; 13 height: 300px; 14 margin: 100px auto; 15 background-color: pink; 16 text-align: center; 17 } 18 19 .son { 20 width: 200px; 21 height: 200px; 22 margin:

订阅 dom事件流