理解DOM中的事件流

【理解DOM中的事件流】的更多相关文章

理解DOM中的事件流

浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个页面. 事件流描述的是从页面中接受事件的顺序.但有意思的是,IE和Netscape开发团队居然提出了两个截然相反的事件流概念.IE的事件流是事件…

理解JavaScript中的事件流

原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡事件捕获 DOM事件流当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个…

怎么理解js中的事件委托

怎么理解js中的事件委托时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/1190000002487141 主题 jQuery 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托事件委托…

再次理解javascript中的事件

一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:…

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event…

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 ②…

DOM中的事件对象

三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefault() 阻止事件的默认行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g…

DOM中的事件对象和IE事件对象

DOM中的事件对象 IE事件对象属性/方法类型读/写说明属性/方法类型读/写说明 bubles Boolean 只读表明事件是否冒泡 cancleBubble Boolean 读/写默认为false,但将其设置为true就可以取消事件冒泡 (与DOM中的stopPropagation()方法的作用相同) cancelable Boolean 只读表明是否可以取消事件的默认行为 returnValue Boolean 读/写默认为true,但将其设置为f…

理解javascript中的事件模型

javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单.代码如下: <p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(…

理解JavaScript中的事件轮询

原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢? JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两…

理解Javascript中的事件绑定与事件委托

最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定最直接的事件绑定:HTML事件处理程序如下示例代码,通过节点属性显式声明,直接在HTML中,显式地为按钮绑定了click事件,当该按钮有用户点击行为时,便会触发myClickFunc方法. /* html */ <button id="btn" onclick="myCl…

DOM中的事件傳播機制

要講到事件傳播機制之前,首先要瞭解的是什麼是事件? 事件,發生在靜態頁面與動態行為之間的交互行為.是JavaScript 和 HTML的交互是通过事件实现的.比如,按鈕的點擊,鼠標的滑過,鍵盤的輸入等由鍵盤,鼠標行為引起的一連串的“多米諾反應”.這一反應就形成了事件流. 事件流分兩部分: ①事件冒泡: 從具體的“div”對象到最外層不具體的Document等任意外層元素包涵體. ②事件捕獲; 捕獲,是從最外層元素一直追溯到具體的元素上,追本溯源的執著!! 那麼,完整的事件流就是事件捕獲+事件冒…

javascript中标准事件流addEventListener介绍

addEventListener-开始前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇. addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEvent 比较简单,二来 addEventListener 才是 DOM 中的标准内容. 简介 addEventLi…

理解nodejs中的stream(流)

阅读目录一:nodeJS中的stream(流)的概念及作用? 二:fs.createReadStream() 可读流三:fs.createWriteStream() 可写流回到顶部一:nodeJS中的stream(流)的概念及作用? 什么是流呢?日常生活中有水流,我们很容易想得到的就是水龙头,那么水龙头流出的水是有序且有方向的(从高处往低处流).我们在nodejs中的流也是一样的,他们也是有序且有方向的.nodejs中的流是可读的.或可写的.或可读可写的.并且流继承了EventEmitt…

和我一起理解js中的事件对象

我们知道在JS中常用的事件有: 页面事件:load: 焦点事件:focus,blur: 鼠标事件:click,mouseout,mouseover,mousemove等: 键盘事件:keydown,keyup,keypress: form表单事件:reset,submit: 内容变化事件:change,input 那JS中"事件对象",到底是个什么东西? 首先,什么是事件呢? 首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触…

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2…

【Swing】理解Swing中的事件与线程

talk is cheap , show me the code. Swing中的事件事件驱动所有的GUI程序都是事件驱动的.Swing当然也是. GUI程序不同于Command Line程序,一个很大的区别是程序执行的驱动条件:命令行程序是接受用户输入的文本参数,对命令解析,然后通过类似switch的选择来执行不同的功能模块.而GUI程序就不一样了.GUI程序由界面元素组成,如Button,CheckBox,TextArea,等等.用户操作不同的组件,就会引发不同的事件,然后, 程序编写…

学习和理解C#中的事件

注:本文系学习笔记. 上一篇文章记录了我对C#中委托的理解.委托实际上是一种类型.可以将一个或多个方法绑定到委托上面,调用委托时,一次执行委托上面绑定的方法.本文要讲述的事件实际上和委托有很深的“感情”.还是以上课的例子开始吧,假设距离上课时间前30分钟去教室上课.在距离上课前5分钟,会发生下面两件事:预备上课铃响,电子屏幕上显示上课时间.我们以下面的代码来表示模拟这个过程. class Lesson{ private int remainTime;//距离上课时间 //课前动作 private…

JavaScript 中的事件流和事件处理程序（读书笔记思维导图）

JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript 与 HTML 之间的交互是通过事件实现的.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,或者说事件就是 Web 浏览器通知应用程序发生了什么事情.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 以下是<JavaScript高级程序设计>中事件流和事件处理程序的总结:…

深入理解javascript中的事件循环event-loop

前面的话本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML…

一个demo让你彻底理解Android中触摸事件的分发

注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作触摸动作一共有三种:ACTION_DOWN.ACTION_MOVE.ACTION_UP.当用户手指接触屏幕时,便产生一个动作为ACTION_DOWN的触摸事件,此时若用户的手指立即离开屏幕,会产生一个动作为ACTION_UP的触摸事件:若用户手指接触屏幕后继续滑动,当滑动距离超过了系统中预定义的距离常数,则产生一个动作为ACTION_MO…

理解JavaScript中的事件路由冒泡过程及委托代理机制

当我用纯CSS实现这个以后.我开始用JavaScript和样式类来完善功能. 然后,我有一些想法,我想使用Delegated Events (事件委托)但是我不想有任何依赖,插入任何库,包括jQuery.我需要自己实现事件委托了. 我们先来看看事件委托到底是什么?他们是怎么工作的,怎么去实现这种机制. 好,它解决了什么问题? 我们先看个简单的例子. 先假设我们有一组按钮,我一次点击一个按钮,然后我希望被点中的状态设为"active".再次点击时取消active. 然后,我们可以写一些H…

DOM中的事件对象（event）

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息. 包括导致事件的元素.事件的类型以及其他与特定事件相关的信息. 例如:鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息. 所以浏览器都支持event对象,但支持方式不同. btn_event.onclick = function (event) { alert(event.type);//"click" }; btn_event.addE…

AngularJS如何给动态添加的DOM中绑定事件

正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿主 DOM 对象(即加入了 ng-click 指令的 DOM 对象)绑定在当前作用域内了. 换言之,当前作用域知道有这个绑定了 ng-click 的 DOM 对象存在,所以 ng-click 才会起作用. 而在你的例子里,HTML 片段是在 compiling phase 后动态插入到 DOM 树中…

彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。

说到底, pageY, clientY, screenY的计算,就是要找到参考点, 它们的值就是: 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离 stackoverflow上面有个回答,讲解的非常清晰. offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document // rect is a DOM…