JS学习之事件流

【JS学习之事件流】的更多相关文章

本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.html <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="eventTest.…

js学习笔记---事件代理

事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定在我们在运行时候创建的DOM元素上.就比如,JQuery库的$.live和$.delegate函数,它们也有这样的机制. http://my.oschina.net/chape/blog/190185 JS事件处理 http://www.cnblogs.com/tengj/p/4794947.h…

js学习笔记-事件委托

通过事件委托,你可以把事件处理器绑定到父元素上,避免了把事件处理器添加到多个子级元素上.从而优化性能. 事件代理用到了事件冒泡和目标元素.而任何一个元素的目标元素都是一开始的那个元素. 这里首先要注意event的target与currentTarget的区别. target:表示触发事件的元素.currentTarget:表示事件绑定的元素. 只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件…

JS学习笔记-事件绑定

一.传统事件模型传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里,从页面获取元素进行相应事件函数的绑定以触发运行.但也存在不足之处: 1.一个事件绑定多个事件监听函数.后者将覆盖前者. 2.须要限制反复绑定的情况 3.标准化event对象二.现代事件绑定 DOM2级事件定义了两个方法用于加入.删除事件:addEventListener().removeEvent…

JS学习之事件冒泡

(1)什么是事件起泡首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件).…

node.js学习(4)事件

1 导入事件库…

JS学习五(js中的事件)

[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3. 键盘事件 keydown:键盘按下时触发 keypress:键盘按下并松开时的瞬间触发 keyup:键盘抬起时触发 [注意事项] ①执行顺序:keydown-->keypress-->keyup ②当长按时,会循环执行keydown-->keypress ③有keydo…

JS的事件绑定、事件流模型

.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick/mouseover/mouseout2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发[注意…

JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面. 关于js事件,这里有一篇非常详细的介绍,可以看下:http://www.cnblogs.com/hyaaon/p/4630128.html 2.IE和W3C不同绑定事件解绑事件的方法…

深入理解JS的事件绑定、事件流模型

一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup②keypress只能捕获数字,字母,符号键,而不能…

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数函数的声明及调用 1.函数的声明格式: func…

【原】javascript事件流

摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原文: 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击…

深入理解javascript事件流

摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原文: 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击…

深入了解javascript事件流

摘要:事件流这个东西是比较重要的,为了让自己更加理解js中的事件流,必须整理整理,梳理一下事件流的各种东西啊.本文大部分内容参考<javascript高级程序设计第三版> 先来一段书里的原文: 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击…

DOM 以及JS中的事件

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1") 通过ID获取唯一的节点多个同名ID只会取到第一个 2 getElmentsName 通过Name取到一个数组,包含1到多个节点使用方式通过循环,取到每一个节点循环次数从0开始,<数组 length [查看…

从零开始的JS生活（二）——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM…

JS中的事件以及DOM 操作

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1") 通过ID获取唯一的节点多个同名ID只会取到第一个 2 getElmentsName 通过Name取到一个数组,包含1到多个节点使用方式通过循环,取到每一个节点循环次数从0开始,<数组 length [查看…

JS中的事件&对象

一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3.键盘事件 keydown: 键盘按下时触发 keypress:键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项] ① 执行顺序:keydown->keypress->keyup ② 当长按时,会循环执行keydown->k…

JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）

JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onfocus/onchange/onscroll 3.键盘事件 keydown:键盘按下时触发. keypress:键盘按下并弹起的瞬间触发.只能捕获字母,数字等符号键,不能捕获功能键. keyup:键盘抬起时出发. 注意: ①执行顺序:keydown-->keypress-->keyup ②…

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ----------------------------------------------------------------------------------------------------------- 一.事件流事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即…

前端 ----js的事件流的概念（重要）

09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ②…

JS的事件流的概念(重点)

09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段:…

python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px).当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 . 举例: <!DOC…

[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队提出了两种完全相反的事件流. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面.…

08 JS的事件流的概念(重点)

在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段那么…

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥--你是如此简单我却将你给遗忘放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算…

JS Event事件流（冒泡机制、捕获机制、事件绑定）

1.事件流事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样): 再多说一句,现在的浏览器默认是采用的是事件…

JS事件流（W3C与IE区别）

一.JS事件的3个阶段:捕获.目标.冒泡,低版本IE不支持捕获阶段: 二.在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获). 冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时,依次它的父元素的click事件也被fire(触发),一直传递到最顶层的body元素为止.而捕获的触发方式正好相反,当某个元素的click事件被触发时,先从最顶层的body元素click事件被触发开始,一直传递到真正被触发的元素为止. 1…

js事件流机制冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netscape --> 事件捕获流查看源码:DOM2事件-捕获-冒泡事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 我们先来个简单的例子,这是HTML结构 <!DOCTYP…

Javascript高级编程学习笔记（57）—— 事件（1）事件流

事件 JS与HTML的交互是通过事件实现的而事件指的就是:文档或浏览器窗口特定的交互瞬间可以通过侦听器来预定事件,以便在事件发生时执行相应的代码这种模式也是设计模式中的观察者模式事件流有了事件,也就有了事件流的概念事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序虽然事件流描述的都是事件的流向,但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念一是IE的冒泡事件流,二是Netscape的捕获事件流事件冒泡即事件开始时由最具…