事件冒泡的阻止和应用场景
来源:互联网 发布:费用报销软件 编辑:程序博客网 时间:2024/05/21 11:03
事件冒泡的原理
事件捕获其实有三种方式,事件冒泡只是其中的一种:(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。
●不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。
●事件捕获方式在不同浏览器,甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案,其它多数浏览器则支持冒泡型事件解决方案,另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的,另外大部分浏览器将冒泡延续到window对象,即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。
事件冒泡的阻止:
原生:
function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
//IE
evt.cancelBubble = true;
}
jquery提供的方式:
方式一:event.stopPropagation();
例如:
$("#div1").mousedown(function(event){
event.stopPropaggation();
});
方法二:return false;
例如:
$("#div1").mousedown(function(event){
return false;
});
$("a").click(function(event){
event.preventDefault(); //阻止默认动作即该链接不会跳转。
alert(4);//但是这个还会弹出
event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用
return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身
});
return false和stopPropagation的区别:
return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
事件冒泡的应用:
(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="text/javascript">
//本例子只在外面盒子定义了处理方法,而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理,难道我们要为每个元素加“onclick="eventHandle(event)"”?显然没有这种集中处理的方法来的简单,同时它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
}
</script>
另外一个应用是<ul><li></li></ul>,往每个li元素加事件怎么加,遍历加吗,不是,应该吧事件加到父级元素中
$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){
var e=e||window.event;
var obj=e.target||e.srcElement;
$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').find('i').removeClass("Selectmark");
$(obj).find("i").addClass("Selectmark");
var CityVal = $(obj).text();
$('#DuohuiReturn_Nav').find("li:first").find("em").text(CityVal);
ShowHide();
return false;
})
var e=e||window.event;
if(e&& e.stopPropagation()){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
(2)让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情,就像老板一下命令,各自员工做自己岗位上的工作去了。
【同时捕获同一事件例子】
总之,事件冒泡是把双刃剑,带来麻烦的同时带来了事件委托这一神器。就是讲子元素的事件通过冒泡的形式交给父级元素来执行。
有可能在开发的时候会遇到这种情况:如导航每一个栏目都要加一个事件,你可能会通过遍历来给每个栏目添加事件:
这种方式来添加事件固然简单,但是需要多次操作DOM,如果有100、1000个同级的元素需要添加事件,这种方式简直不忍直视,
而且当我们动态添加新的Li元素的时候,新添加的Li元素是没有被绑定事件的
这种方式来添加事件固然简单,但是需要多次操作DOM,如果有100、1000个同级的元素需要添加事件,这种方式简直不忍直视,
而且当我们动态添加新的Li元素的时候,新添加的Li元素是没有被绑定事件的
- var ul = document.getElementById('parentUl');
- ul.onclick=function (event) {
- var e = event||window.event,
- source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素,在IE中是srcElement
- if(source.nodeName.toLowerCase() == "li"){ //判断只有li触发的才会输出内容
- alert(source.innerHTML);
- }
- stopPropagation(e); //阻止继续冒泡
- };
- function addElement() {
- var li = document.createElement('li');
- li.innerHTML="我是新孩子";
- ul.appendChild(li);
- }
- 事件冒泡的阻止和应用场景
- javascript的阻止默认事件和阻止冒泡事件
- HTML事件冒泡和JQuery阻止事件冒泡的方式
- 阻止事件的冒泡
- 阻止冒泡和阻止默认事件的兼容性写法
- 浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托
- 阻止冒泡和默认事件
- JQuery中的事件冒泡和阻止事件的传播行为
- js事件的分类和阻止冒泡事件
- JavaScript捕捉事件和阻止冒泡事件的探索
- 防止事件冒泡和阻止默认事件的兼容写法
- 事件冒泡。阻止事件冒泡 |阻止元素的默认行为
- Javascript的事件冒泡和事件捕获,阻止事件冒泡,事件源target
- dojo的阻止事件冒泡
- 阻止事件冒泡和组阻止默认事件和return false的区别
- js 阻止默认事件 和事件冒泡
- 阻止事件冒泡、捕获、和默认事件
- 如何阻止事件冒泡和默认事件
- 动态查询--(choose,when,otherwise)
- Dubbo:来自于阿里巴巴的分布式服务框架
- Android的IPC机制(四)—— Messenger的使用及源码分析
- 利用C++编译器去编译C的库
- Prism研究(for WPF & Silverlight)6.StockTrader RI研究
- 事件冒泡的阻止和应用场景
- 细思极恐,人工智能是否真的会形成自我意识?
- 多方法教你如何去掉WPS文字2013中的换行符
- GetHashCode
- Java虚拟机专题之字节码指令(读书笔记)
- shell 脚本(二)
- selenium+python实现百度贴吧自动签到
- 幼儿园的战争
- 判断android的键盘弹出和收缩