阻止冒泡 | 易学教程

javascript冒泡事件

阅读更多关于 javascript冒泡事件

一、什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。二、事件冒泡有什么作用（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。【集中处理例子】 < div onclick ="eventHandle(event)" id ="outSide" style ="width:100px; height:100px; background:#000; padding:50px" > < div id ="inSide" style ="width:100px; height:100px; background:#CCC" ></ div > </ div > < script type =

JavaScript 事件监听, 事件冒泡, 事件捕获, 阻止默认的事件

阅读更多关于 JavaScript 事件监听, 事件冒泡, 事件捕获, 阻止默认的事件

目录目录 JS事件函数的调用事件处理机制 IE只支持事件冒泡捕获冒泡事件监听移出事件句柄原生JS有兼容阻止事件的默认行为阻止事件的传播阻止事件冒泡其他值得注意的是事件冒泡, 事件捕获, 阻止默认的事件 —这3者密不可分 JS事件函数的调用 : 1.直接调用: 函数名() :demo(); 2.在标签内通过事件调用: 事件="函数名()" :onclick="demo()"; 事件处理机制 :（IE只支持事件冒泡） http://www.jb51.net/article/42492.htm 事件传递：捕获、目标、冒泡三个阶段冒泡型事件: IE6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window 捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。简而言之：事件捕获当你使用事件捕获时

js 阻止事件捕获

阅读更多关于 js 阻止事件捕获

1.支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。 W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。 2.可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡 3. IE浏览器如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获

JQuery中的事件冒泡和阻止事件的传播行为

阅读更多关于 JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获，以及DOM事件流。现在我们来看下，JQuery框架中的事件冒泡问题，以及如何阻止事件的传播行为。 1、JQuery中的事件绑定，都是属于事件冒泡。这篇博客介绍了JQuery中绑定事件处理函数的几种方式，从中可以看到：这几种绑定方式，都不允许我们传递事件类型（是事件冒泡，还是事件捕获）。而javascript原生提供的addEventListener()则允许我们设置事件的类型。 <script> $(function(){ $("#outA").click(function(){ alert("A"); }); $("#outB").click(function(){ alert("B"); }); $("#outC").click(function(){ alert("C"); }); }); </script> <body> <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;"> <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;"> <div id="outC"

终于弄懂了事件冒泡和事件捕获！

阅读更多关于终于弄懂了事件冒泡和事件捕获！

其实感觉不难理解，就是有点绕…… 总结了两个人的博客，写了这篇：总算是搞清楚事件捕获和事件冒泡了！参考资料浅谈事件冒泡与事件捕获理解事件捕获和事件冒泡 1、事件捕获捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定) 2、事件冒泡冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 3、捕获和冒泡过程图事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。好了，对于事件捕获和事件冒泡有了一个概念上的理解，那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码 <!DOCTYPE html> < html > < head > < title > event </ title > </ head > < body > < div id = "obj1" > welcome < h5 id =

JS Event对象详解

阅读更多关于 JS Event对象详解

JS Event对象详解参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。事件通常与函数结合使用，函数不会在事件发生前被执行！ event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。 Event 对象属性和方法 clientX，clientY：返回当事件被触发时，鼠标指针相对于浏览器窗口可视文档区域的左上角的的水平x坐标和垂直y坐标； screenX，screenY：返回当某个事件被触发时

js事件监听：addEventListener() 与移除事件：removeEventListener()

阅读更多关于 js事件监听：addEventListener() 与移除事件：removeEventListener()

说事件绑定得先说事件流事件流冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。来个例子看一下吧！ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html> 当点击了div时事件流走向，在冒泡型事件流中click事件传播顺序为： <div> =》 <body> =》 <html> =》 document 在捕获型事件流中click事件传播顺序为： document =》 <html> =》 <body> =》 <div> 这里之所以说冒泡，并不是视图上的冒泡，而是结构上的冒泡。这里要弄清楚了，就算在视图上div是独立的，但他的在html结构结构上依旧是被body所包裹。而冒泡是由内而外向上冒泡。懂了冒泡之后，捕获就好理解了，就是反向的事件流。由外而内。事件处理

dom事件冒泡和捕获

阅读更多关于 dom事件冒泡和捕获

　原文： Event order 翻译： hh54188的博客　　前言：虽然精通jquery，但对它的原型javascript却不是很了解，最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。　　quirksmode的一系列文章都不错，通俗易懂，这篇只是一系列中的某一篇，有机会把javascript这系列都翻译给大家。　　原文地址在这里 http://www.quirksmode.org/js/events_order.html ，句子中有标注“（？）”表示我对这个句子不是很理解，可能有误。正式开始：　　事件的发生顺序　　这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素 ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | ----------------------------------- ：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发

jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

阅读更多关于 jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> <script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) <

javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

阅读更多关于 javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

事件如何绑定事件 ele.onxxx = function(event) { } 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间 obj.addEventListener(type, function( ){ }, flase); IE9以下不兼容, 可以为一个事件绑定多个处理程序 obj.attachEvent(‘on’ + type, fn); IE独有, 一个事件同样可以绑定多个处理程序事件处理程序的运行环境 ele.onxxx = function(event) { } 程序this指向是dom元素本身 obj.addEventListener(type, fn, false); 程序this指向是dom元素本身 obj.attachEvent(‘on’ + type, fn); 程序this指向window 封装兼容性的addEvent(elem, type, handle);方法 function addEvent (elem, type, handle) { if (elem.addEventListener) { elem.addEventListener(type, handle, false ); } else if (elem.attachEvent) { elem[ 'temp' ] = function () {

订阅阻止冒泡