dom | 易学教程

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）

SELECT box: On IE item is added to OptGroup instead of root. FF ok

阅读更多关于 SELECT box: On IE item is added to OptGroup instead of root. FF ok

问题 I've got a behaviour a bit strange with Select Box and OptGroup : I use OptGroup and try to add at the end a single item which I expect to be out of the OptGroup . FF does it as expected but IE adds it to the OptGroup With this code : fiddle (Note: JQuery was just use for the .ready method, I can't use it in my project) <select id="selectbox"> <optgroup label="optGroup1"> <option>aaaa</option> </optgroup> </select> $(document).ready(function() { var select = document.getElementById("selectbox

DOM事件-级别

阅读更多关于 DOM事件-级别

DOM事件0~3 　　不同级别的DOM事件因其实现方式不同，都有自己的特性。　　0级：是在dom元素上提供相关事件类型属性，js程序可以通过这些特定类型的属性注册事件处理程序。　　　　特性：一个元素同种类型的事件只能注册一个事件处理程序。 // 可以通过内联和元素节点的相关属性注册事件处理程序 <div class="box" onclick="alert('box被点击了')" >x</div> document.getElementsByClassName("box")[0].onclick=function(){ 　　console.log("hello box"); } 　　1级：根本就没有。　　2级：在DOM元素上提供了一个通用的方法，为调用元素注册指定类型的事件处理函数，并可指定事件传播方式。大部分浏览器：addeventListener(event,listener,useCaptrue) IE11以下：attachEvent(event,listener) 　　　　特性：同一个元素上的同类型事件可以注册多个处理函数。事件触发时按照注册顺序触发。　　3级：是对2级的拓展。来源： https://www.cnblogs.com/keliguicang/p/10994363.html

事件对象——DOM中的事件对象

阅读更多关于事件对象——DOM中的事件对象

触发DOM上的交互事件会生成一个event对象，用以保存事件的信息。比如鼠标交互的事件会保存鼠标的位置，键盘交互的事件会保存键的值。 1.DOM0级和DOM2级事件处理程序在进行事件处理时都会有一个event对象传入。例如event.type会保存事件类型名称。 2.HTML事件处理程序中的变量event保存有event对象。 3.event对象的属性和方法：　　 1.bubbles。布尔值，用以表明事件是否冒泡。　　 2.cancelable。布尔值，用以表明是否可以取消事件的默认行为。通常和preventDefault()配合使用。　　3.defaultPrevented。布尔值，值为true表明已经调用了preventDefault()。（DOM3新增）　　4.trusted。布尔值，值为true表明事件是浏览器生成的，false表明是开发者通过js创建的。（DOM3新增）　　 5.currentTarget。Element，事件处理程序当前正在处理事件的那个元素，也就是说事件处理程序被添加的那个元素，即事件处理处理程序的this值的指向。　　 6.target。Element，事件的目标。　　7.detail。与事件相关的细节信息。　　 8.eventPhase。调用事件处理程序的阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段。　　 9

Vue介绍

阅读更多关于 Vue介绍

MVVM架构模式 MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 MVVM模式图 Vue介绍 Vue框架实际上就是一个MVVM的渐进式JavaScript框架，是初创项目的首选前端框架。它是轻量级的，有很多独立的功能或库，在vue里我们可以根据自己的项目来选用它的一些功能。Vue 的核心库只关注视图层，所以开发者关注的只是m-v的映射关系。vue是基于MVVM分层架构思想的前端框架。 Vue开发的两个概念 :“渐进式框架”和

Web_jQuery

阅读更多关于 Web_jQuery

第1章： jQuery简介为了简化 JavaScript 的开发，一些 JavsScript 库诞生了。 JavaScript库封装了很多预定义的对象和实用函数，简化HTML与JavaScript之间的操作，能帮助使用者建立有高难度交互的页面，并且兼容各大浏览器。当前流行的 JavaScript 库有 jQuery是继prototype之后又一个优秀的JavaScript框架。如今， jQuery已经成为最流行的JavaScript库。在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery，顾名思义，也就是JavaScript和查询（query），其宗旨是“WRITELESS,DO MORE”，极大地简化了JavaScript开发人员遍历HTML文档，操作Dom，处理时间，执行动画和开发Ajax，具体来说，优势如下 jQuery是免费、开源的轻量级(压缩后只有几十k) 强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax使用出色的多浏览器兼容性隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历文档说明很全可扩展插件第2章：jQuery快速入门 jQuery库实际上就是一个js文件，只需要在网页中直接引入这个文件就可以了。将jQuery的库文件加入在开发测试时,

DOM event事件

阅读更多关于 DOM event事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>DOM event事件</title></head><body><input type="text" onfocus="f1()" onblur="f2()" value="please input your name" class="key_word"><script>function f1() { var ke=document.getElementsByClassName('key_word'); ke[0].value=null;}function f2() { var ke=document.getElementsByClassName('key_word'); if (ke[0].value.trim().length==0){//如果没有输入或者输入空格 ke[0].value="please input your name"; }}</script></body><

响应式数据（$set、$nextTick）

阅读更多关于响应式数据（$set、$nextTick）

响应式数据的说明响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的一旦数据发生了改变，页面中的内容也会跟着改变动态添加的数据是无效的以及$set的使用 data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的 < div id = "app" > < p > { { person . name } } -- - { { person . age } } -- - { { person . gender } } < / p > < / div > < script src = "vue.js" > < / script > < script > var vm = new Vue ( { el : '#app' , data : { person : { name : 'zs' , age : 18 } } } ) < / script > // 动态给data中添加的数据是无效的 // 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的 // 但是动态绑定的数据不是响应是的。 vm . person . gender = '男' 如果想要动态绑定数据，并且是响应式的,需要使用 vm.$set方法 this . $ set ( this . person , 'gender' , '男' ) 结论：

jquery学习（3）--高级选择器

阅读更多关于 jquery学习（3）--高级选择器

自己手写的学习笔记。常规选择器： /****************学习--高级选择器（1）****************/ ---高级选择器：ie7+ 层次选择器：后代选择器 ul li a $('ul li a') 获取追溯到的多个dom对象 ie6+= 子选择器 div>p $('div p') 只获取子类节点的多个dom对象 ie7+ next选择器 div+p{} $('div+p') 只获取某节点后的同一个同级对象 ie7+ nextAll选择器 div~p{} $('div~p') 获取某节点后面的所有同级的dom对象 ie7+ 在层次选择其中，除了后代选择器外。其他的三种高级选择器不支持ie6的,jquery却是兼容ie6的、 //1.后代选择器--》全兼容 $('#box p').css('color','#666'); //jquery为后代选择器提供了一个等价的find()方法 $('#box').find('p').css('color','#666'); //2.子选择器,孙子级失效。只支持一层子级（儿子级）。 #box>p{ color:red;}//css代码，不支持ie6 $('#box>p').css('color','orange');//jquery兼容ie6 //jquery为子选择器提供了一个等价children()方法。 $('

订阅 dom