jquery事件
事件函數(shù)列表：
blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
change() 表單元素的值發(fā)生變化
click() 鼠標(biāo)單擊
dblclick() 鼠標(biāo)雙擊
mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開（離開子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開（離開子元素不觸發(fā)）
hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開鼠標(biāo)
mousedown() 按下鼠標(biāo)
mousemove() 鼠標(biāo)在元素內(nèi)部移動(dòng)
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動(dòng)條的位置發(fā)生變化
select() 用戶選中文本框中的內(nèi)容
submit() 用戶遞交表單
toggle() 根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù)，依次運(yùn)行多個(gè)函數(shù)
unload() 用戶離開頁面
綁定事件的其他方式
$(function(){
? ? $('#div1').bind('mouseover click', function(event) {
? ? ? ? alert($(this).html());
? ? });
});
取消綁定事件
$(function(){
? ? $('#div1').bind('mouseover click', function(event) {
? ? ? ? alert($(this).html());
? ? ? ? // $(this).unbind();
? ? ? ? $(this).unbind('mouseover');
? ? });
});
主動(dòng)觸發(fā)與自定義事件
主動(dòng)觸發(fā)
可使用jquery對(duì)象上的trigger方法來觸發(fā)對(duì)象上綁定的事件。
自定義事件
除了系統(tǒng)事件外，可以通過bind方法自定義事件，然后用trigger方法觸發(fā)這些事件。
//給element綁定hello事件
element.bind("hello",function(){
? ? alert("hello world!");
});
//觸發(fā)hello事件
element.trigger("hello");
什么是事件冒泡
在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
事件冒泡的作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。
阻止事件冒泡
事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止
$(function(){
? ? var $box1 = $('.father');
? ? var $box2 = $('.son');
? ? var $box3 = $('.grandson');
? ? $box1.click(function() {
? ? ? ? alert('father');
? ? });
? ? $box2.click(function() {
? ? ? ? alert('son');
? ? });
? ? $box3.click(function(event) {
? ? ? ? alert('grandson');
? ? ? ? event.stopPropagation();
? ? });
? ? $(document).click(function(event) {
? ? ? ? alert('grandfather');
? ? });
})
......
<div class="father">
? ? <div class="son">
? ? ? ? <div class="grandson"></div>
? ? </div>
</div>
阻止默認(rèn)行為
阻止右鍵菜單
$(document).contextmenu(function(event) {
? ? event.preventDefault();
});
合并阻止操作
實(shí)際開發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來寫，合并寫法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并寫法：
return false;
頁面彈框?qū)嵗?/b>
