- 浏览: 53052 次
- 性别:
- 来自: 深圳
js事件冒泡
<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>This is parent1 div.</p>
<div id="child1" onClick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br/>
<div id="parent2" onClick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onClick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
ie 一个标签没有写正确,整个页面都显示不出来~~
js有效利用事件冒泡做1000dom元素的事件加载
遍历一个id为domid下的所有dom元素
解析一个json
<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>This is parent1 div.</p>
<div id="child1" onClick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br/>
<div id="parent2" onClick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onClick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
ie 一个标签没有写正确,整个页面都显示不出来~~
js有效利用事件冒泡做1000dom元素的事件加载
遍历一个id为domid下的所有dom元素
解析一个json
发表评论
-
JS的replace方法
2011-08-05 10:34 1201from http://www.cnblogs.com/mxw ... -
要写出在各大主流浏览器上都兼容的JS代码,就要关注他们的区别,下是IE和FF综合考虑的通用DOM!
2011-08-04 14:36 921来源于 http://hi.baidu.com/g ... -
<input type="text" id="start" />输入true取布尔true
2011-07-28 14:22 880"true" and true is di ... -
Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天
2011-07-27 17:47 4813字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天 ... -
高效http页面优化法则一【JS对DOM的操作】
2011-07-08 10:58 1033很多人都认为JS的效率 ... -
form page jump
2011-07-07 10:49 853页面跳转 <input type="hidd ... -
jquery widget sample
2011-07-06 08:39 3447<!DOCTYPE html PUBLIC &quo ... -
jquery apply wait for update
2011-07-05 10:36 1658<!DOCTYPE html PUBLIC &quo ... -
deal with a great quantity domelements add event wait for update
2011-06-29 14:34 1159<!DOCTYPE html PUBLIC " ... -
JS中的attachEvent、addEventListener如何传递参数
2011-06-29 14:02 6268<!DOCTYPE html PUBLIC " ... -
window.onload 和 $(document).ready 区别 待续......
2011-06-27 09:50 2750jquery 学习之一(js中window ... -
js operate frame
2011-06-14 14:04 1193我的页面框架如下 <frameset rows=&quo ... -
js中frame的调用
2011-06-14 12:27 1044js中frame的调用 关键词 ... -
js inner iframe get dom of parent
2011-06-02 15:00 732parent.$("#id");//jqu ... -
ajax
2011-05-27 14:18 645<!DOCTYPE html PUBLIC " ... -
add event to all the dom elements in one page except one dom
2011-05-18 10:20 869<!DOCTYPE html PUBLIC &quo ... -
count down 倒计时
2011-05-13 12:42 575<!DOCTYPE html PUBLIC " ... -
js IE与FireFox的兼容性问题 事件
2011-05-13 09:16 1029# window.event * IE:有windo ... -
deal with href remove the same element
2011-05-11 09:38 800var url="http://zhidao.bai ... -
document.form.item 问题集合的(0)和[0]取法
2011-05-09 15:10 1951<!DOCTYPE html PUBLIC " ...
相关推荐
JavaScript中的事件冒泡是事件处理的一个重要概念,它是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)的过程。这个机制允许事件在事件流的每个阶段都...
在JavaScript中,有多种事件模型,包括事件冒泡(Bubble Phase)和捕获阶段(Capture Phase)。事件冒泡是最常见的一种,它始于事件目标元素(例如,用户点击的按钮),然后依次经过其所有父元素,直到到达文档的根...
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时,阻止这个滚动事件向上传递到其他元素或窗口,特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为,它在用户滚动...
在JavaScript的DOM编程中,事件冒泡是一个非常重要的概念,尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始...总的来说,理解和掌握事件冒泡以及如何控制它,对于编写高效且可控的JavaScript交互逻辑至关重要。
本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。代码中,页面包含一个div元素和一个嵌套在其中的span元素,分别设置了单击响应函数。当单击span...
JavaScript事件冒泡是Web开发中的一个关键概念,它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式,当一个事件(如点击、鼠标移动等)在一个元素上触发时,该事件会自底向上沿着DOM树...
在JavaScript编程中,事件处理是不可或缺的一部分,尤其是事件冒泡(Event Bubbling)机制,它是理解DOM(Document Object Model)事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次...
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
在JavaScript和许多其他基于DOM(文档对象模型)的编程语言中,"事件冒泡"是一个重要的概念,尤其在处理用户交互时。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到其父节点的过程。这个过程就像气泡在水中...
总之,JavaScript的事件冒泡机制为网页交互提供了一种高效、灵活的事件处理模型,使得开发者可以方便地管理和响应用户的操作,同时也要注意不同浏览器之间的兼容性和优化问题。理解并掌握事件冒泡对于提升Web应用的...
js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序...
JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...
5. **总结**:事件冒泡和事件捕获是JavaScript事件模型的两个阶段,它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略,可以降低内存消耗,提高性能,尤其适用于动态添加或删除DOM元素的...
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件(案例);2、键盘事件;2、键盘事件(案例);3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与...
js阻止冒泡事件的方法有2种。 事件冒泡:当一个元素上的事件被触发时,同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素:任何一个事件的目标元素...
关于冒泡事件的demo,教你实现js的冒泡处理,适用于各种浏览器
本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡,并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中,阻止事件冒泡可以通过以下两种方式...
JavaScript 事件冒泡是DOM(文档对象模型)中事件处理的一种机制,它涉及到事件如何从最深的节点向上传播到其父节点的过程。当在某个元素上触发一个事件,比如点击,该事件不仅会在该元素上执行,还会依次在所有父...
事件触发时序问题中的两个重要概念是事件冒泡(event bubbling)和事件捕获(event capturing)。这两个术语描述了事件流(event flow)在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后,该事件会...