JavaScript捕获和冒泡探讨

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

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

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这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目. 事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水…

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(){} /…