jQuery事件

bind();

10年積累的做網(wǎng)站、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有大田免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

參數(shù)一：要綁定事件函數(shù)的事件名。

參數(shù)二：要綁定的事件函數(shù)（事件函數(shù)名），如果將來有可能刪除該綁定的函數(shù)，則必須傳函數(shù)名。

bind()方法可以通過鏈式調(diào)用的形式連續(xù)多次調(diào)用，進而個同一標簽的同一事件（不同事件）添加不同的事件函數(shù)。

on('事件名',fn);

one('事件名',fn);該方法綁定的事件函數(shù)只能被觸發(fā)一次。

unbind();

參數(shù)一：要解綁事件函數(shù)的事件名（如果只傳這一個參數(shù)，則該事件名中綁定的函數(shù)全部解除）。

參數(shù)二：要解除綁定的事件函數(shù)名。

off();

注意：bind()和unbind()在3.0后已經(jīng)被on()和off()取代。

事件簡寫本質(zhì)就是簡化給標簽添加事件函數(shù)的操作，標準的添加事件方法：on/bind/one,類似于js的DOM2級添加事件函數(shù)操作；事件簡寫類似于DOM0級的事件綁定操作。

jq事件簡寫綁定事件函數(shù)的技術(shù)實現(xiàn)原理：

1、jq給每一個事件名定義了同名的函數(shù)，用戶調(diào)用的事件簡寫形式，就是在調(diào)用這個和事件名同名的函數(shù)

2、同名函數(shù)內(nèi)部實現(xiàn)原理：當用戶調(diào)用了該函數(shù)，首先獲取該函數(shù)的函數(shù)名（函數(shù)名代表的是事件名），在函數(shù)內(nèi)部通過on把通過參數(shù)傳進來的函數(shù)綁定在函數(shù)名對應(yīng)的事件上。

blur(fn)：失去焦點時觸發(fā)該方法。

focus(fn)：當鼠標或tab按鈕讓元素獲得焦點時，觸發(fā)該函數(shù)。

change(fn)：表單元素失去焦點（單選框、復選框、下拉菜單標簽被選中即可觸發(fā)，不需等待失去焦點），觸發(fā)該事件。

click(fn)：鼠標點擊時觸發(fā)該事件。

dbclick(fn)：雙擊元素時觸發(fā)該事件（注意：把click和dbclick用于同一個元素會產(chǎn)生問題）。

$(window).scroll(fn)：當頁面滾動時觸發(fā)事件。

hover(fn1,fn2):鼠標移入觸發(fā)fn1函數(shù)，鼠標移出觸發(fā)fn2函數(shù)。

復合事件：toggle().在1.8之前中，復合了奇、偶次點擊事件，在1.9之后的版本中toggle方法用于jq的動畫

toggle（）方法在1.8之前的版本中需要兩個函數(shù)類型作為參數(shù)，奇數(shù)次點擊觸發(fā)第一個函數(shù)，偶數(shù)次店家觸發(fā)第二個函數(shù)。

事件對象的獲?。涸谑录|發(fā)的函數(shù)中傳遞event參數(shù)。

event.type:事件類型

event.target:觸發(fā)事件的元素

e.currentTarget:事件綁定在哪個元素上

event.pageX:鼠標相對于文檔的左側(cè)坐標

event.pageY:鼠標相對于文檔的頂部坐標

e.preventDefault():取消標簽事件，如a標簽的頁面跳轉(zhuǎn)。

e.stopPropagation():阻止事件冒泡

1、阻止事件冒泡

stopPropagation()方法

2、阻止默認行為

preventDefault()方法

注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默認行為

　2、jQuery不支持事件捕獲

解密jQuery事件核心：

jquery中有哪些基礎(chǔ)事件方法

jquery基礎(chǔ)事件，包括綁定事件、簡寫事件、復合事件；

一．綁定事件

jQuery 通過.bind()方法來為元素綁定這些事件。

形式：

bind(type, [data], fn)

參數(shù)：

type 表示一個或多個類型的事件名字符串；

[data]是可選的，作為 event.data 屬性值傳遞一個額外的數(shù)據(jù)，這個數(shù)據(jù)是一個字符串、一個數(shù)字、一個數(shù)組或一個對象；

fn 表示綁定到指定元素的處理函數(shù)。

二、簡寫事件

為了使開發(fā)者更加方便的綁定事件，jQuery 封裝了常用的事件以便節(jié)約更多的代碼。 稱之為簡寫事件。簡寫事件，綁定方法如下圖，

三、復合事件

jQuery 提供了許多最常用的事件效果， 組合一些功能實現(xiàn)了一些復合事件， 比如切換功?能、智能加載等。

擴展資料

1、綁定事件fn函數(shù)

1)使用點擊事件

$('input').bind('click', function () {//點擊按鈕后執(zhí)行匿名函數(shù)

　alert('點擊！');

});

2)普通處理函數(shù)

$('input').bind('click', fn); //執(zhí)行普通函數(shù)式無須圓括號

function fn() {

alert('點擊！');

}

2、簡寫事件函數(shù)

1）.mouseover()和.mouseout()表示鼠標移入和移出的時候觸發(fā)。而.mouseenter()和.mouseleave()表示鼠標穿過和穿出的時候觸發(fā)。

2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。

3）.focus()和.blur()分別表示光標激活和丟失，事件觸發(fā)時機是當前元素。而.focusin()和.focusout()也表示光標激活和丟失，但事件觸發(fā)時機可以是子元素。

3、復合事件示例，背景移入移出切換效果

$('div').hover(function () {

$(this).css('background', 'black');? ? ?//mouseenter 效果

}, function () {

$(this).css('background', 'red');? ? ? //mouseleave 效果，可省略

});

參考資料

jQuery官方網(wǎng)站-事件

jQuery事件冒泡及解決辦法

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

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

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

$(function(){

})

代合并阻止操作：實際開發(fā)中，一般把阻止冒泡和阻止默認行為合并起來寫，合并寫法可以用.

// event.stopPropagation();

// event.preventDefault();

// 合并寫法：

return false;

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

一般綁定事件的寫法：bind

事件委托的寫法：

如果我們要取消事件的委托：

//ev.delegateTarge 委托的對象

$(ev.delegateTarge).undelegatee();

//如果是上面的兩種例子可使用//$list.undelegate();

創(chuàng)建節(jié)點： ('div')

var ('div這是一個div元素/div');

插入節(jié)點:

1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素

2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素

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

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

刪除節(jié)點

$('#div1').remove();

怎樣用jquery寫一個事件？

用jquery寫一個事件的操作如下：

1、用confirm輸入以下代碼：

if(confirm("確定要刪除數(shù)據(jù)嗎"))

{

}else{

}

2、用組件jBox(需要下載jquery.jBox-2.3.min.js，并引入)

$.jBox.confirm("您確定要刪除此委托嗎？", "提示", function(v, h, f)

{

if (v == "ok")

{

}else{

}

});

jQuery 事件

事件方法會觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個事件。

bind()????向匹配元素附加一個或更多事件處理器????

blur()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?blur?事件????

change()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?change?事件????

click()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?click?事件????

dblclick()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?double?click?事件????

delegate()????向匹配元素的當前或未來的子元素附加一個或多個事件處理器????

die()????移除所有通過?live()?函數(shù)添加的事件處理程序。????

error()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?error?事件????

event.isDefaultPrevented()????返回?event?對象上是否調(diào)用了?event.preventDefault()。????

event.pageX????相對于文檔左邊緣的鼠標位置。????

event.pageY????相對于文檔上邊緣的鼠標位置。????

event.preventDefault()????阻止事件的默認動作。????

event.result????包含由被指定事件觸發(fā)的事件處理器返回的最后一個值。????

event.target????觸發(fā)該事件的?DOM?元素。????

event.timeStamp????該屬性返回從?1970?年?1?月?1?日到事件發(fā)生時的毫秒數(shù)。????

event.type????描述事件的類型。????

event.which????指示按了哪個鍵或按鈕。????

focus()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?focus?事件????

keydown()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?key?down?事件????

keypress()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?key?press?事件????

keyup()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?key?up?事件????

live()????為當前或未來的匹配元素添加一個或多個事件處理器????

load()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?load?事件????

mousedown()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?down?事件????

mouseenter()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?enter?事件????

mouseleave()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?leave?事件????

mousemove()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?move?事件????

mouseout()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?out?事件????

mouseover()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?over?事件????

mouseup()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?mouse?up?事件????

one()????向匹配元素添加事件處理器。每個元素只能觸發(fā)一次該處理器。????

ready()????文檔就緒事件（當?HTML?文檔就緒可用時）????

resize()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?resize?事件????

scroll()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?scroll?事件????

select()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?select?事件????

submit()????觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的?submit?事件????

toggle()????綁定兩個或多個事件處理器函數(shù)，當發(fā)生輪流的?click?事件時執(zhí)行。????

trigger()????所有匹配元素的指定事件????

triggerHandler()????第一個被匹配元素的指定事件????

unbind()????從匹配元素移除一個被添加的事件處理器????

undelegate()????從匹配元素移除一個被添加的事件處理器，現(xiàn)在或?qū)????

unload()