阻止冒泡 | 易学教程

事件流，事件处理程序，事件对象

阅读更多关于事件流，事件处理程序，事件对象

1.事件流事件流描述的是从页面接收事件的顺序。 1.1 事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。 1.2 事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，事件捕获的用意在于在时间到达预定目标之前捕获它。 1.3 DOM事件流 DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处理目标程序阶段和事件冒泡阶段。 IE9,Opera,Firefox,Chorme和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。 2.事件处理程序事件就是用户或浏览器自身执行的某种动作。而响应某个时间的函数就叫做事件处理程序（或事件侦听器）。 2.1 HTML事件处理程序某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。 1  2 <input type="button" value="Click Me" onclick="alert('Clicked')"></input> 在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，如下代码所示： 1 <script type="text

事件对象、事件流、关于冒泡、默认行为

阅读更多关于事件对象、事件流、关于冒泡、默认行为

事件对象：在触发事件的时候，会产生一个事件对象event，这个对象中包含了与事件相关的信息。例如：在触发鼠标双击时，是触发了这几件事 onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流：当HTML元素产生一个事件时，这个事件会在元素节点与根节点之后的路径传播，路径所经过的节点都会接收到这个事件，这个传播过程称为DOM事件流。 DOM事件流分为冒泡事件流和捕获事件流。事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。当我们触发了子元素的事件后，父元素对应的事件也会被触发。这个事件从原始元素开始一直冒泡到DOM树的最上层。不管有没有注册事件都会冒泡，都没有事件的话就不会触发事件。只要有一层注册事件，它都会往上冒泡，对应的事件也会一层一层的被触发。在盒子套盒子的时候，1.当鼠标移到外盒子边框的时候会触发进出外盒子事件2.当接着进入内盒子会触发离开外盒子-进入内盒子-进入外盒子事件。在轮播图的时候，为什么不给内盒子添加移入事件，而给外盒子添加？因为内盒子与两个按钮是并列关系，当进入内盒子，它会触发显示按钮事件，接着你移到按钮上它会触发离开内盒子事件，接着冒泡，这时它向上冒泡给外盒子（真正离开内盒子了，隐藏按钮display：none，不占位置

事件冒泡

阅读更多关于事件冒泡

1. 什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序；如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 2. 事件冒泡的作用事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 3. 阻止事件冒泡事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 4. 阻止右键菜单可以在网页上阻止按鼠标右键弹出的默认菜单，然后可以自定义菜单 $(document).contextmenu(function(event) { event.preventDefault(); }); 5. 合并阻止事件冒泡和右键菜单实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，如下 // event.stopPropagation(); // event.preventDefault(); // 合并写法： return false; 例子1，验证事件冒泡，搞个三层结构div,并分别定义样式

关于js事件冒泡和时间捕获

阅读更多关于关于js事件冒泡和时间捕获

（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 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行

阻止JavaScript事件冒泡传递

阅读更多关于阻止JavaScript事件冒泡传递

< html > < head > < title > 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation） </ title > < meta name ="keywords" content ="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> < script type ="text/javascript" > function doSomething (obj,evt) { alert(obj.id); var e = (evt) ? evt:window.event; // 判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble if (window.event) { e.cancelBubble = true ; } else { // e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation e.stopPropagation(); } } </ script > </ head > < body > < div id ="parent1" onclick ="alert(this.id)" style ="width:250px;background-color:yellow" > < p >

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

阅读更多关于 js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault： preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转： //假定有链接 <a href="http://www.cnf2e.com/" id="testA" >cnf2e</a> var a = document.getElementById("testA"); a.onclick =function(event){//阻止默认行为 event.preventDefault(); } stopPropagation： stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发

关于JS中的冒泡事件

阅读更多关于关于JS中的冒泡事件

原文地址： http://www.cnblogs.com/rixinren/archive/2010/04/06/1705812.html js冒泡事件前几天在老大那里接触到了js的一个新的单词：冒泡事件；何为冒泡事件。就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。消除冒泡事件的方法阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果 <html> <head> <title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title> <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> <script type="text/javascript"> function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt

HTML 事件(一) 事件的介绍

阅读更多关于 HTML 事件(一) 事件的介绍

　　本篇主要介绍HTML中的事件知识：事件相关术语、DOM事件规范、事件对象。其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流、事件委托 4. HTML 事件(四) 模拟事件操作目录 1. 事件相关术语：介绍事件相关的术语；如：事件类型、事件名称、事件目标等等。 2. DOM事件规范：介绍W3C目前定义的三种DOM事件规范：0、2、3级。 3. 事件类型：介绍了HTML目前的事件类型；如：UIEvent、FocusEvent、MouseEvent、WheelEvent、KeyboardEvent、CompositionEvent。 4. Event 事件对象：表示事件发生时的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。 1. 事件相关术语事件可表示为动作。以鼠标为例，移动、点击、悬停都是一种动作，也是事件。事件类型 ( event type ) ：表示事件的类型。如： MouseEvent (鼠标事件)、 KeyboardEvent (键盘事件)。事件名称 ( event name ) ：表示事件的名称。如：click(单击)、dblclick(双击)。事件目标 ( event target ) ：表示与发生事件相关的目标对象。

点击事件执行两次的解决办法

阅读更多关于点击事件执行两次的解决办法

出现点击事件执行两次的原因就是事件冒泡，根据需求这里给出两种解决方法： 1. return false 2. event.stopPropagation() 两种方法是有区别的： event.stopPropagation()会阻止事件往上冒泡，但并不阻止事件本身； return false 则是既阻止了事件往上冒泡又阻止了事件本身。来源： CSDN 作者： qq_43386335 链接： https://blog.csdn.net/qq_43386335/article/details/104630555

javascript 事件基础

阅读更多关于 javascript 事件基础

一：事件流事件流描述的是从页面中接收事件的顺序。事件冒泡 <div id="one"> <div id="two"> <div id="three">点击</div> </div> </div> document.getElementById("one").addEventListener("click", clickOne);　　　　//默认最后一个参数为false，即表示事件冒泡机制 document.getElementById("two").addEventListener("click", clickTwo); document.getElementById("three").addEventListener("click", clickThree); function clickOne() { console.log("点击的是one"); } function clickTwo() { console.log("点击的是two"); } function clickThree() { console.log("点击的是three"); } 点击id为three的div，会依次打印出结果：点击的是three、点击的是two、点击的是one。事件捕获 document.getElementById("one").addEventListener("click",

订阅阻止冒泡