JavaScript捕获与冒泡与委托

事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 相反的,事件冒泡是自下而上的去触发事件. 并不是所有的事件都能冒泡,以下事件不冒泡:blur.focus.load.unload 阻止冒泡的方法 if(event && event.stopPropagation){ // w3c标准 event.stopPropagation(); }else{ // IE系列 IE 678 event.cancelBubble = true; } 事件委托就是利用冒泡的…

JavaScript捕获和冒泡探讨

<div id="div"> <input type="button" value="banana" id="banana" /> </div> 在此页面中我们添加如下的代码: var btn = document.getElementById('banana'); var div = document.getElementById('div'); btn.addEventListener(…

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事…

JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

JavaScript中捕获/阻止捕获.冒泡/阻止冒泡事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. 第一部分:事件冒泡即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

JavaScript的事件监听、捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element.addEventListener(type, listener[, useCapture]); //IE6~8不支持 element.attachEvent('on' + type, listener) //支持IE6~10,IE11不支持 element['on' + type] = fu…

javascript事件捕获与冒泡

对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目. 事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水…

DOM事件-冒泡、捕获、传播、委托

事件捕获以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡根事件捕获截然相反.发生点击事件时,事件会从目标元素上开始触发,向外传播,一直到根元素停止.从内到外依次触发:目标元素—目标元素的父元素—父元素的父元素—根. 事件传播事件捕获和事件冒泡都有事件传播阶段,传播阶段就是事件从触发开始到结束的过程. 优先级:先捕获,再冒泡. 两种传播方式的来源:W3C推行DOM2级事件之前网景和IE在打架,网景…

JavaScript(3)---事件冒泡、事件捕获

JavaScript(3)---事件冒泡与事件捕获一.理解冒泡与捕获假设有这么一段代码 <body> <div><p>标签</p> </div> </body> 转换成图如下我们知道Dom是有节点关系的 body -> div -> p 之间的关系就是爷爷 -> 父亲 -> 儿子. 我们来思考一个关键的问题如果此时我们在 body div p 都绑定一个点击事件(click).此时如果我们只点击 p标…

javascript的事件监听与捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventListener(type, listener[, useCapture]); // IE6~8不支持 element.attachEvent(’on’ + type, listener); // IE6~10,IE11不支持 element[’on’ + type] = function(){} /…

javaScript的事件冒泡事件捕获

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开…

浅析JavaScript事件流——冒泡

一.什么是事件冒泡流我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传令兵接到士官战事信息,打出旗语,百米之外的第二个传令兵看到后打出同样的旗语,第三个,第四个....,直到信息传到诸葛亮手中.用专业术语解释就是:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直…

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(…

dom事件不求甚解，色解事件捕获和冒泡

以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了,请在评论里指出首先,在页面上方4个div标签,一个嵌套个用来测试捕获和冒泡, 因为捕获和冒泡的重点是过程,而不是起点和重点,所以我只在中间的两个div small和meddiv 上绑定了事件基本的html代码如下 <div id="bigdiv" style="wid…

JavaScript 阻止事件冒泡的实现方法

JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function cancelBubble(evt) { // 阻止事件冒泡 if (window.event) { // Chrome,IE6,Opera window.event.cancelBubble = true; } else { // FireFox 3 evt.stopPropagation(); }…

js中addEventListener第三个参数涉及到的事件捕获与冒泡

js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型,比如点击(click).触摸(touchstart), 第二个参数就是事件函数, 比如我给一个button添加alert函数. window.onload=function(){ document.getElementById("hello").addEventListener("…

javascript捕获页面窗口关闭事件

javascript捕获窗口关闭事件有两种方法 onbeforeunload() ,onUnload() 用法有两种: 1. function window.onbeforeunload() { alert("关闭窗口")} function window.onunload() { alert("关闭窗口")} 2. 在body 标签里加入onUnload事件 <body o…

javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One…

理解js事件冒泡事件委托事件捕获

js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <div id="col"> <p> <a id="btn" href="#">button</a> </p> </div> <script> l…

浅谈javascript中事件冒泡与事件捕获

事件冒泡:一个事件会顺着他的层级一直往上传,一直传到document上为止,即从盒模型上看是从内到外的过程. 例: <!DOCTYPE html><html lang="en" onclick="alert('html')"><head> <meta charset="UTF-8"> <title>事件流</title><style type="text/cs…

JavaScript 事件(捕获和冒泡兼容性写法)

事件浏览器客户端上客户触发的行为都称为事件所有的事件都是天生自带的不需要人为绑定只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick onchange onfocus onblur 等等当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上. 我们把他叫事件对象事件对象 event…

JavaScript面试问题：事件委托和this

JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由于有着各种各样的背景,所以不是每个人都对JavaScript及其基本原理有广泛的认识.通常来书,除非你去参加工作面试才会去思考为什么或者怎么做, 否则JavaScript只是你工作的内容. 这个系类的目标是深入探讨JavaScript的一些概念和理论.主题来自于 Darcy Clarke的JavaScript典型面试问题列表.希望…

JavaScript事件代理和事件委托

一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台…

《JAVASCRIPT高级程序设计》事件委托和模拟事件

由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运行性能.因为,首先每个函数都是对象,都会占用内存,内存中对象越多,性能就越差:其次,必须事先指定所有事件处理程序而导致的dom访问次数,会延迟整个页面的交互就绪时间. 一.事件委托对“事件处理程序过多”问题的解决方案就是事件委托.事件委托利用了冒泡事件,只指定一个事件处理程序,就可以管理某一类型的…

JS中的事件(对象，冒泡，委托，绑定)

- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之间的交互行为我们可以在事件对应的属性中设置一些js代码,当事件被触发时,这些代码会执行文档的加载: 浏览器在加载一个页面时,是按照自上而下的顺序加载的, 读取到一行就运行一行,在代码执行时,页面还没有加载将js代码编写到页面的下面,确保页面加载完毕以后再执行js代码 window.onload…

jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事件一.常用事件 click(function(){...}) //鼠标点击事件 hover(function(){...}) //当鼠标指针悬停在被选元素上时 blur(function(){...}) //当输入域失去焦点 (blur) 时 focus(function(){...}) //当输…

JavaScript(jQuery)中的事件委托

一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能.为什么呢?因为,每个事件处理函数都是对象,对象会占用内存,内存中的对象越多,性能就越差.此外,必须事先指定所有的事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 2.对有很多个数据的表格以及很长的列表逐个添加事件,简直就是噩梦.所以事件委托,能极大地提高页面的运行性能,…

探讨JavaScript的事件冒泡

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素…