1. 事件冒泡
阻止事件冒泡的兩種方式：
- event.stopPropagation();
- return false ;
2. 綁定事件——bind(type,[data],function)
type為一個或多個事件類型的字符串，data是作為event.data屬性值傳遞給事件對象的額外對象。
$("#btn").bind( "click mouseover", function () { ...);
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$(function () {
$( ".txt").bind({
"focus": function () {
$( "#divTip").html("請輸入" ).show();
},
"blur":function () {
$( "#divTip")
.show()
.html( "合法");
}
});
});
|
var info = { name: 'Cathy', date: '2014-1-24' };
$(function () {
$("#test").bind("click", info, function (event) {
$("#divTip").show().html(event.data.name + "," + event.data.date);
});
});
3.事件切換
$(function () {
$(".clsTitle").hover(
function () {
$(".clsContent").show();
},
function () {
$(".clsContent").hide();
});
});
- toggle:依次順序調(diào)用N個函數(shù)，最后一個調(diào)用完成后再從第一個輪流執(zhí)行。
$(function () {
$("#divTest").toggle(
function () {
alert(1);
},
function () {
alert(2);
},
function () {
alert(3);
}
);
});
4.移除事件——unbind(type,func)
參數(shù)說明：type為要移除的事件類型，func為要移除的事件處理函數(shù)。如果func為空，則移除元素所有的事件。
function func() {
$("#divTip").append("點擊按鈕2");
}
$(function () {
$("#Button1").click(function () {
$("#divTip").append("點擊按鈕1");
});
$("#Button2").click(func);
$("#Button3").click(function () {
$("input").unbind("click", func);
});
});
5.其他事件
one(type,[data],func)——為元素綁定只執(zhí)行一次的事件。
trigger(type,[data])——在所選擇的元素上觸發(fā)指定類型的事件。
$(function () {
var i = 1;
function btn_Click() {
this.value = i++;
}
$( "input").one("click" , btn_Click);
$( "input").bind("click" , btn_Click);
$( "input").trigger("click" );
})
6.實例應用
①選項卡效果
<body>
<ul id="menu">
<li class="tabFocus">家居 </li>
<li> 電器</li >
<li> 二手</li >
</ul>
<ul id="content">
<li class="conFocus">我是家居的內(nèi)容 </li>
<li> 歡迎您來到電器城 </li>
<li> 二手市場，產(chǎn)品豐富多彩 </li>
</ul>
</body>
html Body
<script type="text/javascript">
$( function () {
$( "#menu li").each(function (index) {
$( this).click(function () {
$( this).addClass("tabFocus" ).siblings().removeClass("tabFocus");
$( "#content li:eq(" + index + ")" ).show().siblings().hide();
});
});
});
</script>
②屏幕中間彈窗遮罩
<style type="text/css">
body {
font-size: 13px;
}
.divShow {
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding-left: 10px;
}
.divShow span {
padding-left: 50px;
}
.dialog {
width: 360px;
border: solid 5px #666;
position: absolute;
display: none;
z-index: 101;
}
.dialog .title {
background-color: #fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .title img {
float: right;
}
.dialog .content {
background-color: #fff;
padding: 25px;
height: 60px;
}
.dialog .content img {
float: left;
}
.dialog .content span {
float: left;
padding-top: 10px;
padding-left: 10px;
}
.dialog .bottom {
text-align: right;
padding: 10px 10px 10px 0px;
background-color: #eee;
}
.mask {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
filter: alpha(opacity=30);
display: none;
z-index: 100;
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 65px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);
}
</style>
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">這是一條可刪除的記錄</a>
<span>
<input id="Button1" type="button" value="刪除" class="btn" />
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Images/close.gif" alt="點擊可以關(guān)閉" />刪除時提示
</div>
<div class="content">
<img src="Images/delete.jpg" alt="" /><span>您真的要刪除該條記錄嗎？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="確定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
html
<script type="text/javascript">
$(function () {
$("#Button1").click(function () { //注冊刪除按鈕點擊事件
$(".mask").show(); //顯示背景色
showDialog(); //設(shè)置提示對話框的Top與Left
$(".dialog").show(); //顯示提示對話框
})
/*
*根據(jù)當前頁面與滾動條位置，設(shè)置提示對話框的Top與Left
*/
function showDialog() {
var objW = $(window); //當前窗口
var objC = $(".dialog"); //對話框
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var curW = objC.width();
var curH = objC.height();
//計算對話框居中時的左邊距
var left = sclL + (brsW - curW) / 2;
//計算對話框居中時的上邊距
var top = sclT + (brsH - curH) / 2;
//設(shè)置對話框在頁面中的位置
objC.css({ "left": left, "top": top });
}
$(window).resize(function () {//頁面窗口大小改變事件
if (!$(".dialog").is(":visible")) {
return;
}
showDialog(); //設(shè)置提示對話框的Top與Left
});
$(".title img").click(function () { //注冊關(guān)閉圖片點擊事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button3").click(function () {//注冊取消按鈕點擊事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button2").click(function () {//注冊確定按鈕點擊事件
$(".dialog").hide();
$(".mask").hide();
if ($("input:checked").length != 0) {//如果選擇了刪除行
$(".divShow").remove(); //刪除某行數(shù)據(jù)
}
})
})
</script>
