关于事件冒泡和默认行为的学习

来源：互联网发布：jquery 对象数组编辑：程序博客网时间：2024/05/21 02:48

之前一直就想查一下关于事件冒泡的问题，但是一直都没有去做的。在网上查找了很多是资料有很多写的很好的别人总结的东西，但是最后还是自己亲手测试，发现一个道理，凡事还是自己去测试一下的话呢，可能效果什么会出乎你的意料。虽然这是前台的东西，我自己也是不怎么希望往前台方向发展，但是呢，毕竟工作中还是会写很多的js。还好是自己去做了这件事，一下子发现自己之前写的很多是代码，实在是太烂了，这件事让我感触很大。

去网上查询的时候往往会发现事件冒泡和浏览器默认行为会一起出现。首先解释用自己的话解释一下名称的含义。事件冒泡是一个从子节点向祖先节点冒泡的过程，事件捕获刚好相反，是从祖先节点到子节点的过程。下面是在网上找的

1.event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；
2.event对象只在事件发生的过程中才有效。当在function (event){}的代码中打断点会发现，确实是只有在方法中才会有event对象的存在，过了之后在添加的监听中一切都不存在了。下面是关于event和浏览器的关系，是在网上查询的，由于我不是专门做前端开发的，所以没有必要去研究这一点了。

firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。
3.我们在写代码的时候会考虑到浏览器兼容的问题所以下面的判断是必不可少的下面两句效果相同：
function a(e){
var e = (e) ? e : ((window.event) ? window.event : null);
var e = e || window.event; // firefox下window.event为null, IE下event为null
}

jquery的bind() , live() , 和 delegate() 比较总结（网上查询的应该说写比较好了，自己的语言组织能力估计都没有这么好，so......）
1.bind 和直接点click是一回事使用冒泡的形式进行绑定固然可以使用阻止冒泡的形式进行提高效率但是效率也不会太高。
2.live 比 bind 在返回到根目录的时候会检查两件事绑定的标签元素类型和事件类型，( bind 是对具体的元素绑定具体的事件；live，或者 delegate 是事件代理模式，在动态生成的将来元素中用bind 需要恰当的时机，而用代理则避免这个模式。还有代理会更高效。
3.delegate 与 bind相比，后者是将事件绑定在特定的元素身上，但是delegate是将事件直接绑定在了document上，如果进行ajax加载节点的时候不用再加载完之后重新绑定一次，
4.使用
$('a').bind('click', function() { alert("111"); });
$('a').live('click', function() { alert("111"); });
$(document).delegate('a', 'click', function() { alert(111); }); //document 可以使用靠近被点击的标签提高效率（自己的理解）。

自己在火狐上做了个试验：效果可以说出乎意外
dom ：body 中
<div id="div3">
<div id="div2">
<div id="div1">测试冒泡事件</div>
</div>
</div>
<div id="div33">
<div id="div22">
<select id="div11">
<option >1</option>
<option >2</option>
<option >3</option>
</select>
</div>
</div>
$(function(){
/* $("#div1").click(function(){ //alert 顺序为树形倒序
alert("div1");
});*/

/* $("#div1").bind('click',function(){ //属性倒叙并且一直循环
alert("div1");
});*/

/*$("#div1").live('click',function(){ // div2，div3 body div1 document window
alert("div1");
});*/

/*$("#div1").live('click',function(){ // div1
alert("div1");
return false;
});*/

/* $(document).delegate('#div1','click',function(){ // div1 div2，div3 body document window
alert("div1");
});*/

/*$("#div2").delegate('#div1','click',function(){ // div1 div2，div3 body document window
alert("div1");
});*/

$("#div2").delegate('#div1','click',function(){ // div1
alert("div1");
return false;
});

$("#div2").click(function(){
alert("div2");
});

$("#div3").click(function(){
alert("div3");
});

$("body").click(function(){
alert("body");
});

$(document).click(function(){
alert("document");
});

$(window).click(function(){
alert("window");
});

$("#div11").change(function(){ //测试冒泡事件是不是只对click有影响
alert("改变1");
return false;
});

$("#div22").change(function(){
alert("改变22");
});
});

最后总结：不论是什么事件都会有冒泡的存在，而且虽然不知道对性能的影响到底有多大，但是要是一个页面里监听事件很多的话，每个又要进行冒泡，应该消耗也不会小，为了提高自己的代码自量，所以-- -->在非必须利用到冒泡的情况下，尽量使用delegate方法并且添加阻止冒泡事件。如果给a标签或者submit标签可使用return false结束。
否则只阻止冒泡不阻止标签属性
$("#id").click(funcction(event){
if(event && event.stopPropagation){ //非IE
event.stopPropagation();
}else{
window.event.cancelBubble = true ;
}
});

0 0