JQ事件绑定效果|||事件气泡

来源：互联网发布：vr眼镜软件编辑：程序博客网时间：2024/04/29 12:31

<body>
<div class="a">
<h3>习近平</h3>
<div class="c">国家主席习近平当地时间２８日下午抵达布拉格，开始对捷克进行国事访问。当习近平乘坐的专机进入捷克领空时，捷克空军两架战机升空护航。这是中捷两国建交６７年来中国国家主席首次对捷克进行国事访问</div>
</div>
</body>

1.加强效果

$(function(){

$("h5").bind("click",function(){

if($(this).next().is(":visible")){

$(this).next().hide();

}else{

$(this).next().show();}

})

2.鼠标移动的效果

$(function(){
$(".a h3").mouseover(function(){
$(".c").show();}).mouseout(function(){
$(".c").hide();})
})

3.合成效果

hover方法{hover（enter，leave）}

$function(){

$(".a h3").hover(function(){

$(this).next().show;

}).function(){

$(this).next.hide();

}

})

4.toggle方法

$function(){

$(".a h3").toggle(function(){

$(this).next().show（）;

}).function(){

$(this).next.hide();

}

})

或

$(function(){
$(".a h3").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})})

二：事件冒泡

$(function(){
$("span").bind("click",function(){
var txt=$("#msg").html()+"<p>内层span元素</p>";
$("#msg").html(txt);
});
$("#content").bind("click",function(){
var txt=$("#msg").html()+"<p>外层div元素</p>";
$("#msg").html(txt);
});
$("body").bind("click",function(){
var txt=$("#msg").html()+"<p>body元素</p>";
$("#msg").html(txt);
});

})
</script>
<body>
<div id="content">
外层div元素
<span>内层元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>

当单机内部<span>,会输出3条记录，这就是冒泡！

1.事件对象

$("element").bind("click",function(event){});

2.停止冒泡

$("body").bind("click",function(){
var txt=$("#msg").html()+"<p>body元素</p>";
$("#msg").html(txt);

event.stopPropagation();//停止冒泡
});

3.组织默认行为

event.preventDefault();

4.事件的捕获和事件冒泡相反

事件对象属性

1 0