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ā)這些事件。
事件冒泡
什么是事件冒泡?
在一個(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() 來阻止
事件委托
事件委托就是利用冒泡的原理,把事件加到父級(jí)上,通過判斷事件來源的子集,執(zhí)行相應(yīng)的操作,事件委托首先可以極大減少事件綁定次數(shù),提高性能;其次可以讓新加入的子元素也可以擁有相同的操作。
創(chuàng)建節(jié)點(diǎn)
var $div = $('<div>');
var $div2 = $('<div>這是一個(gè)div元素</div>');
插入節(jié)點(diǎn)?
1、append()和appendTo():在現(xiàn)存元素的內(nèi)部,從后面插入元素
2、prepend()和prependTo():在現(xiàn)存元素的內(nèi)部,從前面插入元素
3、after()和insertAfter():在現(xiàn)存元素的外部,從后面插入元素
4、before()和insertBefore():在現(xiàn)存元素的外部,從前面插入元素
滾輪事件與函數(shù)節(jié)流
jquery.mousewheel插件使用?
jquery中沒有鼠標(biāo)滾輪事件,原生js中的鼠標(biāo)滾輪事件不兼容,可以使用jquery的滾輪事件插件jquery.mousewheel.js。
函數(shù)節(jié)流?
javascript中有些事件的觸發(fā)頻率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面說的鼠標(biāo)滾輪事件,在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù),可以巧妙地使用定時(shí)器來減少觸發(fā)的次數(shù),實(shí)現(xiàn)函數(shù)節(jié)流。
整屏滾動(dòng)實(shí)例