16

jquery事件

事件函數(shù)列表:

blur() 元素失去焦點

focus() 元素獲得焦點

change() 表單元素的值發(fā)生變化

click() 鼠標單擊

dblclick() 鼠標雙擊

mouseover() 鼠標進入(進入子元素也觸發(fā))

mouseout() 鼠標離開(離開子元素也觸發(fā))

mouseenter() 鼠標進入(進入子元素不觸發(fā))

mouseleave() 鼠標離開(離開子元素不觸發(fā))

hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)

mouseup() 松開鼠標

mousedown() 按下鼠標

mousemove() 鼠標在元素內部移動

keydown() 按下鍵盤

keypress() 按下鍵盤

keyup() 松開鍵盤

load() 元素加載完畢

ready() DOM加載完成

resize() 瀏覽器窗口的大小發(fā)生改變

scroll() 滾動條的位置發(fā)生變化

select() 用戶選中文本框中的內容

submit() 用戶遞交表單

toggle() 根據(jù)鼠標點擊的次數(shù),依次運行多個函數(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');

? ? });

});

主動觸發(fā)與自定義事件

主動觸發(fā)?

可使用jquery對象上的trigger方法來觸發(fā)對象上綁定的事件。

自定義事件?

除了系統(tǒng)事件外,可以通過bind方法自定義事件,然后用trigger方法觸發(fā)這些事件。

事件冒泡

什么是事件冒泡?

在一個對象上觸發(fā)某類事件(比如單擊onclick事件),如果此對象定義了此事件的處理程序,那么此事件就會調用這個處理程序,如果沒有定義此事件處理程序或者事件返回true,那么這個事件會向這個對象的父級對象傳播,從里到外,直至它被處理(父級對象所有同類事件都將被激活),或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window)。

事件冒泡的作用?

事件冒泡允許多個操作被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上),它還可以讓你在對象層的不同級別捕獲事件。

阻止事件冒泡?

事件冒泡機制有時候是不需要的,需要阻止掉,通過 event.stopPropagation() 來阻止

事件委托

事件委托就是利用冒泡的原理,把事件加到父級上,通過判斷事件來源的子集,執(zhí)行相應的操作,事件委托首先可以極大減少事件綁定次數(shù),提高性能;其次可以讓新加入的子元素也可以擁有相同的操作。

創(chuàng)建節(jié)點

var $div = $('<div>');

var $div2 = $('<div>這是一個div元素</div>');

插入節(jié)點?

1、append()和appendTo():在現(xiàn)存元素的內部,從后面插入元素

2、prepend()和prependTo():在現(xiàn)存元素的內部,從前面插入元素

3、after()和insertAfter():在現(xiàn)存元素的外部,從后面插入元素

4、before()和insertBefore():在現(xiàn)存元素的外部,從前面插入元素

滾輪事件與函數(shù)節(jié)流

jquery.mousewheel插件使用?

jquery中沒有鼠標滾輪事件,原生js中的鼠標滾輪事件不兼容,可以使用jquery的滾輪事件插件jquery.mousewheel.js。

函數(shù)節(jié)流?

javascript中有些事件的觸發(fā)頻率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件,在短事件內多處觸發(fā)執(zhí)行綁定的函數(shù),可以巧妙地使用定時器來減少觸發(fā)的次數(shù),實現(xiàn)函數(shù)節(jié)流。

整屏滾動實例

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,701評論 1 11
  • (續(xù)jQuery基礎(1)) 第5章 DOM節(jié)點的復制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,519評論 0 8
  • 本篇博客源地址 總結: 鼠標事件 1.click與dbclick事件ele.click()ele.click(ha...
    ZombieBrandg閱讀 753評論 0 1
  • 總結: 鼠標事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,722評論 2 10
  • 第1章 鼠標事件 1-1 jQuery鼠標事件之click與dbclick事件 用交互操作中,最簡單直接的操作就是...
    mo默22閱讀 1,347評論 0 6

友情鏈接更多精彩內容