jQuery中的事件
作者：曾慶林
事件初探
加載文檔完成觸發(fā)：$(document).ready(function(){})
事件可以多次執(zhí)行件余。
代碼可以簡(jiǎn)寫：$(function(){})
事件綁定
1 可以之間添加事件函數(shù)
$("h1").click(function(){
//觸發(fā)事件要做的事情
})
問題是：
- 每次單擊h1都會(huì)相應(yīng)事件哀九，不能解除。
- 這個(gè)里面的函數(shù)也不能復(fù)用
- 只能綁定一個(gè)函數(shù)
2 可以通過綁定事件
- bind() 綁定事件
- unbind() 解綁事件
- one() 只執(zhí)行一次
js
$(".box").bind("click",fn1);
$(".box").bind("click",fn2);
// 可以綁定多個(gè)
function fn1(){
alert("你敢點(diǎn)我筐赔，我不是你的菜");
}
function fn2(){
alert("我就是去問問老朋友");
}
$("button").bind("click",fn3);
function fn3(){
alert("你點(diǎn)我了株婴，就不要找那個(gè)她蹲盘！");
$(".box").unbind("click");
// 在這里 解綁的 .box 所有click 事件
/* 也可以只解綁一個(gè)一個(gè)事件如：
$(".box").unbind("click"股毫，fn1);
*/
}
$(".box").one("click",function(){
alert("我只出現(xiàn)一次，以后不煩你了");
})
html
<div class="box">box</div>
<button>我是米米</button>
合成事件
hover(enter,leave)
用于模擬光標(biāo)懸停事件.當(dāng)光標(biāo)移動(dòng)到元素上時(shí),會(huì)觸發(fā)指定的第一個(gè)函數(shù),當(dāng)光標(biāo)移出這個(gè)元素時(shí),觸發(fā)指定的第二個(gè)函數(shù).
$("h1").hover(
function(){// mouseover觸法},
function(){// mouseout觸發(fā)}
)
模擬事件
trigger
事件都是通過用戶執(zhí)行相應(yīng)的操作后觸發(fā)的辜限。有時(shí)我們更希望讓事件自動(dòng)執(zhí)行皇拣，而不用手動(dòng)觸發(fā)，或者在一個(gè)事件中調(diào)用另一個(gè)事件的處理函數(shù)薄嫡。這時(shí)我們可以考慮使用模擬操作氧急。
模擬操作可以使用trigger()方法來(lái)完成。
html
<p>this is a p</p>
<form action="">
<input type="text" id="good" />
<input type="text" />
</form>
js
$(function(){
$("p").click(function(){ alert("我被點(diǎn)擊了")});
$("p").trigger("click");
$("#good").trigger("focus");
// trigger 可以模擬自動(dòng)獲得焦點(diǎn)
})
阻止事件冒泡的方法
在綁定的事件中加入event參數(shù)毫深，并在函數(shù)中增加event.stopPropagation()調(diào)用就可以阻止事件冒泡吩坝。也可以使用return false阻止冒泡。
event中還有一個(gè)方法：event.preventDefault();作用是阻止默認(rèn)行為哑蔫，如表單提交钉寝！
html
<div class="papa">
父親
<div class="self">
自己
<div class="son">兒子<span>this is 核心</span><a >BAIDU</a></div>
</div>
</div>
我們?cè)趐apa 上面綁定一個(gè)事件
在span 也綁定一個(gè)事件
單擊span 時(shí)候 papa也會(huì)觸發(fā)單擊事件（事件會(huì)從子元素傳遞到父輩元素上面）
怎么樣阻止事件的默認(rèn)向上冒泡傳遞呢?
a 會(huì)默認(rèn) 跳轉(zhuǎn)頁(yè)面，怎樣阻止默認(rèn)挑戰(zhàn)頁(yè)面呢闸迷？
$("span").bind("click",fn1);
$(".papa").bind("click",fn2);
function fn1(e){
alert("我是小span的被點(diǎn)擊了");
e.stopPropagation();//阻止事件冒泡
}
function fn2(){
alert("我是papa被點(diǎn)擊了");
}
$("a").bind("click",fn3);
function fn3(e){
alert("A被單擊了");
e.preventDefault();//阻止默認(rèn)事件
}
