JQ事件繫結效果|||事件氣泡
阿新 • • 發佈：2019-02-06
<style type="text/css">
.a{
width:100px;
border:1px solid #333;}
.c{
width:100px;
border:1px solid #333;
display:none;}
</style>
<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.事件的捕獲和事件冒泡相反 事件物件屬性