js和jquery中的事件委託

2022-08-05 15:51:23 字數 2010 閱讀 9723

【轉+自己的修改】

概念:

什麼是事件委託:通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。

舉個列子:有三個同事預計會在週一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委託給前臺mm代為簽收。現實當中,我們大都採用委託的方案(公司也不會容忍那麼多員工站在門口就為了等快遞)。前臺mm收到快遞後,她會判斷收件人是誰,然後按照收件人的要求籤收,甚至代為付款。這種方案還有一個優勢,那就是即使公司裡來了新員工(不管多少),前臺mm也會在收到寄給新員工的快遞後核實並代為簽收。

原理:

利用冒泡的原理,把事件加到父級上,觸發執行效果。

作用:

1.效能要好

2.針對新建立的元素,直接可以擁有事件

事件源 :

跟this作用一樣(他不用看指向問題,誰操作的就是誰),event物件下的

使用情景:

•為dom中的很多元素繫結相同事件;

•為dom中尚不存在的元素繫結事件;

js的事件委託:

好處呢:1,提高效能。

我們可以看一個例子:需要觸發每個li來改變他們的背景顏色。

<

ul id

="ul"

>

<

li>aaaaaaaa

li>

<

li>bbbbbbbb

li>

<

li>cccccccc

li>

ul>

window.onload = function

() ali[i].onmouseout = function

() }

}

這樣我們就可以做到li上面新增滑鼠事件。

但是如果說我們可能有很多個li用for迴圈的話就比較影響效能。

下面我們可以用事件委託的方式來實現這樣的效果。html不變。

window.onload = function

() }

oul.onmouseout = function

(ev)

}}

好處2,新新增的元素還會有之前的事件。

我們還拿這個例子看,但是我們要做動態的新增li。點選button動態新增li

如:

不用事件委託我們會這樣做:

window.onload = function

() ali[i].onmouseout = function

() }

obtn.onclick = function

()

}

這樣做我們可以看到點選按鈕新加的li上面沒有滑鼠移入事件來改變他們的背景顏色。

因為點選新增的時候for迴圈已經執行完畢。

那麼我們用事件委託的方式來做。就是html不變

window.onload = function

() }

oul.onmouseout = function

(ev)

} obtn.onclick = function

()}

ok:如同在我們用微博中,新發微博照樣有之前的滑鼠事件。

jquery的事件委託

$(function

()else

}) });

最新on()方法取替了delegate()方法

$(function

()else

}) });

推薦開發使用最新版的jquery和使用最新版的方法

jquery 中的事件冒泡

廢話少說,先來一段 熱熱身 1238 910外層div元素 11內層span元素 12外層div元素 1314 151635 view code 網頁上有兩元素,其中一個元素巢狀在另一個元素裡,並且都被繫結了click事件,同時元素上也繫結了click事件。 當單擊內部的元素,即觸發元素的click...

jquery 和js 還有 jq 掛事件

js根據id取元素 取到的是具體的元素 var a document getelementbyid p1 根據class取 var a document getelementsbyclassname aa 根據標籤名取 var a document getelementsbytagname div ...

js 中hash和hashchange事件

1 hash即url中 字元後面的部分。 使用瀏覽器訪問網頁時,如果網頁url中帶有hash,頁面就會定位到id 或name 與hash值一樣的元素的位置 hash值瀏覽器是不會隨請求傳送到伺服器端的 通過window location hash屬性獲取和設定hash值。 window locati...