jQuery 事件委託

2021-08-06 06:20:01 字數 1077 閱讀 7982

概念:

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

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

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

作用:1.效能要好

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

使用情景:

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

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

html:

js:

$(function());

// 動態新增dom節點

$('#addbtn').click(function());

/*** 事件委託

*/// jquery 1.9已廢棄

/*$('li').live('click', function());*/

// jquery的delegate寫法

$('#wrap').delegate('li', 'click', function(ev));

// jquery的on的寫法

$('#wrap').on('click', 'li', function(ev) )

// js原生寫法

var _wrap = document.getelementbyid('wrap');

_wrap.addeventlistener('click', function(ev)

// 找到父級 ul#wrap

this.style.border = '2px solid #f00';

});});

jQuery 事件委託

本文 隨著dom結構的複雜化和ajax等動態指令碼技術的運用,事件委託自然浮出了水面 jquery為繫結和委託事件提供了.bind live 和.delegate 方法。本文在討論這幾個方法內部實現的基礎上,展示它們的優劣勢及適用場合。事件委託 事件委託的事例在現實當中比比皆是。比如,有三個同事預計...

jquery事件委託

概念 什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快...

jquery事件委託

事件委託 首先舉幾個時間的例子,幫助大家容易理解 比如 有三個同事預計在會在周一收到乙份快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等 二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案。前台mm收到快遞後,她會判斷收件人是誰,然後按照收件人的要求簽收,甚至代為付款。這種方案還有乙個...